Angular.js: एनजी-मॉडल प्रारंभिक मूल्य और इनपुट की स्थिति [प्रकार = श्रेणी] निर्धारित नहीं करता है

को निर्मित 18 मार्च 2014 · 35टिप्पणियाँ · स्रोत: angular/angular.js

मूल रूप से, एनजी-मॉडल का उपयोग करके प्रारंभिक मूल्य के साथ एक रेंज इनपुट स्थापित किया जाता है। HTML तत्व का वास्तविक मान और श्रेणी स्लाइडर की स्थिति गलत है। मुझे उम्मीद है कि स्लाइडर चर और HTML इनपुट मूल्य मॉडल चर के साथ सिंक में होगा।

यहाँ एक repro है: http://jsfiddle.net/fschwiet/HVp2J/

विंडोज 8 पर चलने वाले क्रोम और फायरफॉक्स पर सत्यापित।

मैं देख रहा हूं कि इनपुट [प्रकार = श्रेणी] के लिए अन्य मुद्दे खुले हैं, यह स्पष्ट नहीं है कि वे संबंधित हैं।

forms moderate duplicate broken expected use bug

स्रोत

fschwiet

👍17

सबसे उपयोगी टिप्पणी

GitHub की नई प्रतिक्रियाओं की सुविधा के साथ, आपको अब "+1" टिप्पणी करने की आवश्यकता नहीं है। इसके बजाय, आप इस मुद्दे में पहली टिप्पणी के शीर्ष-दाईं ओर "+: मुस्कान:" पर क्लिक करके अपनी रुचि को चिह्नित कर सकते हैं, फिर चुनें: +1: ("+1")। इस मुद्दे पर सदस्यता लेने वाले सभी को एक बेकार सूचना भेजने से बचा जाता है।

roryokane 15 मार्च 2016

👍15 🎉5

सभी 35 टिप्पणियाँ

यह अभी भी कोणीय 1.2.14 के साथ एक मुद्दा है: http://jsfiddle.net/HVp2J/7/

IgorMinar 18 मार्च 2014

काम के इर्द-गिर्द, एक $ टाइमआउट हैंडलर के भीतर मॉडल मूल्य निर्धारित कर सकता है।

fschwiet 18 मार्च 2014

👍2

$ timeout doesn 'की मदद, मुद्दा बना हुआ है।

@fschwiet : http://jsfiddle.net/HVp2J/9/

Rajat-Chowdhary 18 मार्च 2014

@ रजत-चौधरी क्षमा करें, मुझे एक कोड सैंपल शामिल करना चाहिए जिसमें दिखाया गया है कि $ टाइमआउट वर्क-अराउंड के रूप में कैसे काम कर सकता है: http://jsfiddle.net/fschwiet/YC4av/

वर्कअराउंड पासा लगता है क्योंकि मॉडल वैल्यू को तब तक इनिशियलाइज़ नहीं किया जा सकता है जब तक वर्कअराउंड के लिए $ टाइमआउट कॉलबैक काम नहीं करता है।

fschwiet 18 मार्च 2014

👍1

लगता है मुझे समस्या मिल गई।
कोणीय, न्यूनतम, अधिकतम और कदम सेट करने से पहले मान सेट करता है ताकि ऐसा लगे कि सीमा गलत स्थिति में है। समस्या को हल करने के लिए मैंने इस निर्देश का उपयोग किया

angular.module('angular-range', []).directive('range', function() {
    return {
        replace: true,
        restrict: 'E',
        scope: {
            value: '=ngModel',
            min: '=rangeMin',
            max: '=rangeMax',
            step: '=rangeStep',
        },
        template: '<input type="range"/>',
        link: function(scope, iElement, iAttrs) {
            scope.$watch('min', function() { setValue(); });
            scope.$watch('max', function() { setValue(); });
            scope.$watch('step', function() { setValue(); });
            scope.$watch('value', function() { setValue(); });

            function setValue() {
                if (
                    angular.isDefined(scope.min) &&
                    angular.isDefined(scope.max) &&
                    angular.isDefined(scope.step) &&
                    angular.isDefined(scope.value)
                ) {
                    iElement.attr("min", scope.min);
                    iElement.attr("max", scope.max);
                    iElement.attr("step", scope.step);
                    iElement.val(scope.value); 
                }
            }
            function read() {
                scope.value = iElement.val();
            }

            iElement.on('change', function() {
                scope.$apply(read);
            });
        }
    };
});

ardf69 24 अप्रैल 2014

👍1

यहाँ निजी दायरे के बिना ngRange का नया संस्करण है:

.module('ngRange', [])
.directive('ngRange', function() {
    return {
        replace: true,
        restrict: 'E',
        require: 'ngModel',
        template: '<input type="range"></input>',
        link: function(scope, element, attrs, ngModel) {
            var ngRangeMin;
            var ngRangeMax;
            var ngRangeStep;
            var value;

            if (!angular.isDefined(attrs.ngRangeMin)) {
                ngRangeMin = 0;
            } else {
                scope.$watch(attrs.ngRangeMin, function(newValue, oldValue, scope) {
                    if (angular.isDefined(newValue)) {
                        ngRangeMin = newValue;
                        setValue();
                    }
                });
            }
            if (!angular.isDefined(attrs.ngRangeMax)) {
                ngRangeMax = 100;
            } else {
                scope.$watch(attrs.ngRangeMax, function(newValue, oldValue, scope) {
                    if (angular.isDefined(newValue)) {
                        ngRangeMax = newValue;
                        setValue();
                    }
                });
            }
            if (!angular.isDefined(attrs.ngRangeStep)) {
                ngRangeStep = 1;
            } else {
                scope.$watch(attrs.ngRangeStep, function(newValue, oldValue, scope) {
                    if (angular.isDefined(newValue)) {
                        ngRangeStep = newValue;
                        setValue();
                    }
                });
            }
            if (!angular.isDefined(ngModel)) {
                value = 50;
            } else {
                scope.$watch(
                    function () {
                        return ngModel.$modelValue;
                    }, 
                    function(newValue, oldValue, scope) {
                        if (angular.isDefined(newValue)) {
                            value = newValue;
                            setValue();
                        }
                    }
                );
            }

            function setValue() {
                if (
                    angular.isDefined(ngRangeMin) &&
                    angular.isDefined(ngRangeMax) &&
                    angular.isDefined(ngRangeStep) &&
                    angular.isDefined(value)
                ) {
                    element.attr("min", ngRangeMin);
                    element.attr("max", ngRangeMax);
                    element.attr("step", ngRangeStep);
                    element.val(value); 
                }
            }

            function read() {
                if (angular.isDefined(ngModel)) {
                    ngModel.$setViewValue(value);
                }
            }

            element.on('change', function() {
                if (angular.isDefined(value) && (value != element.val())) {
                    value = element.val();
                    scope.$apply(read);
                }
            });
        }
    };
});

ardf69 23 जून 2014

यह अभी भी एक मुद्दा है, है ना?

http://plnkr.co/edit/MAT5KPkXyWblAJ71L8nK?p=hi

zavidovych 3 दिस॰ 2014

हां +1

sabhiram 30 दिस॰ 2014

हाँ, अभी भी एक मुद्दा है।

kelle62819 6 जन॰ 2015

मैंने स्टैकओवरफ़्लो में कुछ इसी तरह से पूछा कि 100 से अधिक होने पर एंगुलरजेएस का उपयोग करके एक इनपुट [रेंज] के मूल्य को कैसे शुरू किया जाए । 1.4.0-beta.build.3791 का उपयोग करके यह बग अभी भी मौजूद है।

mpromonet 17 जन॰ 2015

bastianwegge 28 मई 2015

+1, और यह सबसे खराब हो गया जब इनपुट रेंज को इनपुट नंबर के साथ जोड़ा जाता है।

Yimiprod 3 जून 2015

इस मुद्दे के लिए +1

mrbinky3000 9 जून 2015

एक ही समस्या का सामना: +1

Tooa 14 जून 2015

हां - वही समस्या +1

larpo1 15 जून 2015

यह मूल html5 है - इस पर क्या स्थिति है, क्या कोई इस पर काम कर रहा है?

onemenny 28 जून 2015

इसे ध्यान में रखते हुए: https://github.com/danielcrisp/angular-rangeslider/issues/51
जहाँ त्रुटि: ngModel: numfmt रेंज स्लाइडर फेंका गया है
मैंने इसके लिए @ ardf69 समाधान समायोजित किया:

angular.module('common').directive('rangeSlider', [function () {
    return {
        replace: true,
        restrict: 'E',
        require: 'ngModel',
        template: '<input type="range"/>',
        link: function (scope, element, attrs, ngModel) {
            var ngRangeMin;
            var ngRangeMax;
            var ngRangeStep;
            var value;

            function init() {
                if (!angular.isDefined(attrs.ngRangeMin)) {
                    ngRangeMin = 0;
                } else {
                    scope.$watch(attrs.ngRangeMin, function (newValue, oldValue, scope) {
                        if (angular.isDefined(newValue)) {
                            ngRangeMin = newValue;
                            setValue();
                        }
                    });
                }
                if (!angular.isDefined(attrs.ngRangeMax)) {
                    ngRangeMax = 100;
                } else {
                    scope.$watch(attrs.ngRangeMax, function (newValue, oldValue, scope) {
                        if (angular.isDefined(newValue)) {
                            ngRangeMax = newValue;
                            setValue();
                        }
                    });
                }
                if (!angular.isDefined(attrs.ngRangeStep)) {
                    ngRangeStep = 1;
                } else {
                    scope.$watch(attrs.ngRangeStep, function (newValue, oldValue, scope) {
                        if (angular.isDefined(newValue)) {
                            ngRangeStep = newValue;
                            setValue();
                        }
                    });
                }
                if (!angular.isDefined(ngModel)) {
                    value = 50;
                } else {
                    scope.$watch(
                        function () {
                            return ngModel.$modelValue;
                        },
                        function (newValue, oldValue, scope) {
                            if (angular.isDefined(newValue)) {
                                value = newValue;
                                setValue();
                            }
                        }
                    );
                }

                if (!ngModel) {
                    return;
                }
                ngModel.$parsers.push(function (value) {
                    var val = Number(value);
                    if (val !== val) {
                        val = undefined;
                    }
                    return val;
                });
            }

            function setValue() {
                if (
                    angular.isDefined(ngRangeMin) &&
                    angular.isDefined(ngRangeMax) &&
                    angular.isDefined(ngRangeStep) &&
                    angular.isDefined(value)
                    ) {
                    element.attr("min", ngRangeMin);
                    element.attr("max", ngRangeMax);
                    element.attr("step", ngRangeStep);
                    element.val(value);
                }
            }

            function read() {
                if (angular.isDefined(ngModel)) {
                    ngModel.$setViewValue(value);
                }
            }

            element.on('change', function () {
                if (angular.isDefined(value) && (value != element.val())) {
                    value = element.val();
                    scope.$apply(read);
                }
            });

            init();
        }
    };
}
]);

onemenny 28 जून 2015

+1, मुझे एक ही समस्या है जब एनजी-इफ के साथ [इनपुट प्रकार = श्रेणी] स्विच करना

radek-anuszewski 10 जुल॰ 2015

मैं भी इस समस्या में भाग गया, और इसके बारे में एक स्टैक ओवरफ्लो प्रश्न लिखा, "कोणीय में, स्कोप वेरिएबल _before_ ngModel से bind विशेषता इनपुट के value बांधता है" । प्रश्न में एक रन कोडेबल स्निपेट शामिल है जो इस समस्या को पुन: पेश करता है।

कुछ वर्कअराउंड्स को स्टैक ओवरफ्लो पर उत्तर के रूप में पोस्ट किया गया है। मेरे मामले में लागू होने वाले में min , max का मान सेट करने के लिए $inputElement.prop() साथ DOM हेरफेर का उपयोग करना शामिल है, और step (जो भी विशेषताएँ आवश्यक हैं)। मेरे कस्टम निर्देश के अंतर्निहित <input> value प्रथम सेट होने से पहले DOM हेरफेर करने से, मैं समस्या से बचता हूं।

roryokane 25 अक्तू॰ 2015

इस बग को संबोधित करने का मेरा आलसी तरीका शून्य / अधिकतम और चरण मानों को 100 से विभाजित करना था। इसलिए 300 3.0 हो गया, आदि और मूल्य 100 से नीचे हो गए। फिर मैं चीजों को आवश्यकतानुसार वापस गुणा करता हूं। शायद यह किसी के लिए उपयोगी है।

4string 17 नव॰ 2015

+1 यह बहुत कष्टप्रद है।

jwittner 28 जन॰ 2016

berkaey 22 फ़र॰ 2016

westcode 23 फ़र॰ 2016

Sithdown 27 फ़र॰ 2016

एक और आलसी वर्कअराउंड हैक:

      $timeout(function () {
        angular.element('.slider-input').val(amount);
      });

davedx 1 मार्च 2016

👍2

cue232s 14 मार्च 2016

roryokane 15 मार्च 2016

👍15 🎉5

मैंने एनजी-मॉडल को हटाकर ऑनड्रैग विधि का उपयोग करके अपनी समस्या को हल किया है।
इस http://codepen.io/nagarajumusini/pen/BKpGJz को देखें

nagarajumusini 18 मार्च 2016

👎2

marianmazarovici 13 अप्रैल 2016

👎3

felixschul 18 मई 2016

👎3

प्रारंभिक मूल्य निर्धारित करने के लिए इनपुट के लिए एनजी-इनिट को जोड़ना मेरे लिए काम करता है

<input type="range" class="slider-years" min="0" max="30" step="1" value="0" data-ng-model="metier.anneeExperience" data-ng-init="metier.anneeExperience ? metier.anneeExperience = metier.anneeExperience : metier.anneeExperience = 0" />

इसमें हल मिला:

http://jsfiddle.net/jestho/8dymV/7/

Jerome2606 22 मई 2016

👍2

हम इस पर (आखिरकार) काम कर रहे हैं। Https://github.com/angular/angular.js/issues/5892 के डुप्लिकेट के रूप में बंद करना

Narretz 5 जुल॰ 2016

👍1

$ (दस्तावेज़)।
angular.element ('। yourclasshere')। val (valueoftheslideronload);
};

यह jQuery का वर्कअराउंड काम करता है जिससे आप पेज लोड होने पर एक मान सेट कर सकते हैं लेकिन स्लाइडर का जो भी मूल्य है वह तब तक सिंक पर नियंत्रण नहीं करेगा जब तक कि इसे छुआ न जाए।

jacobbullock95 6 जुल॰ 2016

@davedx शायद समस्या हल होने से पहले यह सबसे अच्छा तरीका है।

mrdulin 3 अग॰ 2016

<input type="range" min="15" data-ng-init="signup.age=30" value="30" max="85" step="1" name="ageInput" class="form-control input-lg" ng-model="signup.age" oninput="ageOutputId.value = ageInput.value" /> <output name="ageOutputName" id="ageOutputId">30</output>

AhmadRedha 1 अक्तू॰ 2016

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Angular.js: एनजी-मॉडल प्रारंभिक मूल्य और इनपुट की स्थिति [प्रकार = श्रेणी] निर्धारित नहीं करता है

सबसे उपयोगी टिप्पणी

सभी 35 टिप्पणियाँ

संबंधित मुद्दों