Angular.js: ng-model은 입력의 초기 값과 위치를 설정하지 않습니다 [type = range]

이것은 Angular 1.2.14의 여전히 문제입니다 : http://jsfiddle.net/HVp2J/7/

해결 방법으로 $ timeout 핸들러 내에서 모델 값을 설정할 수 있습니다.

$ timeout은 도움이되지 않지만 문제는 남아 있습니다.

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

@ Rajat-Chowdhary 죄송합니다. $ timeout이 해결 방법으로 작동하는 방법을 보여주는 코드 샘플을 포함해야합니다. http://jsfiddle.net/fschwiet/YC4av/

해결 방법이 작동하려면 $ timeout 콜백이있을 때까지 모델 값을 초기화 할 수 없기 때문에 해결 방법이 어색해 보입니다.

문제를 찾은 것 같습니다.
각도는 최소, 최대, 단계를 설정하기 전에 값을 설정하므로 범위가 잘못된 위치에있는 것처럼 보입니다. 문제를 해결하기 위해이 지시문을 사용했습니다.

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);
            });
        }
    };
});

다음은 private 범위가없는 새 버전의 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);
                }
            });
        }
    };
});

이것은 여전히 ​​문제입니다, 그렇죠?

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

네 +1

예, 여전히 문제입니다.

값이 100 이상일 때 AngularJS를 사용하여 input [range] 값을 초기화하는 방법을 stackoverflow에서 비슷한 질문

+1

+1, 입력 범위를 입력 번호와 결합하면 최악이되었습니다.

이 문제에 대한 +1

같은 문제에 직면 : +1

응-같은 문제 +1

이것은 기본 html5입니다-이것에 대한 상태는 무엇입니까?

이것을 고려하십시오 : https://github.com/danielcrisp/angular-rangeslider/issues/51
오류 : ngModel : numfmt 범위 슬라이더가 throw됩니다.
@ 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();
        }
    };
}
]);

+1, ng-if로 [입력 유형 = 범위]를 전환 할 때도 같은 문제가 있습니다.

나는 또한이 문제로 달리고, 그것에 대해 스택 오버플로 질문을 썼다, "각도에서 바인드 ngModel _before_ 범위 변수의 속성은 입력의 결합 value " . 질문에는이 문제를 재현하는 실행 가능한 코드 조각이 포함되어 있습니다.

일부 해결 방법은 Stack Overflow에 대한 답변으로 게시되었습니다. 내 경우에 적용 할 수있는 것은 $inputElement.prop() 와 함께 DOM 조작을 사용하여 min , max 및 step 값을 설정하는 것입니다 (필요한 속성). 내 사용자 지정 지시문의 기본 <input> 의 value 가 처음 설정되기 전에이 DOM 조작을 수행하면 문제를 피할 수 있습니다.

이 버그를 해결하는 게으른 방법은 최소 / 최대 및 단계 값을 100으로 나누는 것입니다. 따라서 300은 3.0이되고 값은 100 아래로 떨어집니다. 그런 다음 필요에 따라 다시 곱합니다. 누군가에게 유용 할 수도 있습니다.

+1 이것은 매우 성가신 일입니다.

+1

+1

+1

또 다른 게으른 해결 방법 해킹 :

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

+1

GitHub의 새로운 반응 기능을 사용하면 더 이상 "+1"을 주석 할 필요가 없습니다. 대신이 호의 첫 번째 댓글 오른쪽 상단에있는 "+ : smile :"를 클릭 한 다음 : +1 : ( "+1")을 선택하여 관심을 표시 할 수 있습니다. 이렇게하면이 문제에 가입 한 모든 사람에게 쓸모없는 알림을 보내는 것을 방지 할 수 있습니다.

ng-model을 제거하여 ondrag 방법을 사용하여 문제를 해결했습니다.
이 http://codepen.io/nagarajumusini/pen/BKpGJz 확인

+1

+1

입력에 ng-init를 추가하면 초기 값을 설정할 수 있습니다.

<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/

우리는 이것을 (마지막으로) 노력하고 있습니다. https://github.com/angular/angular.js/issues/5892 의 복제본으로 닫기

$ (문서) .ready (function () {
angular.element ( '. yourclasshere'). val (valueoftheslideronload);
});

이 jQuery 해결 방법은 페이지가로드 될 때 값을 설정할 수 있도록 작동하지만 슬라이더 컨트롤의 값은 터치 할 때까지 동기화되지 않습니다.

@davedx 아마도 이것이 문제가 해결되기 전에 가장 좋은 방법입니다.

<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>