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 может работать как временное решение :

Обходной путь кажется рискованным, поскольку значение модели не может быть инициализировано до тех пор, пока не будет выполнен обратный вызов $ timeout для работы обходного пути.

Кажется, я нашел проблему.
Angular устанавливает значение перед установкой min, max и step, поэтому кажется, что диапазон находится в неправильном положении. Для решения проблемы я использовал эту директиву

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

Вот новая версия 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

Да, все еще проблема.

Я спросил нечто подобное в stackoverflow. Как инициализировать значение input [range] с помощью AngularJS, когда значение больше 100 . При использовании 1.4.0-beta.build.3791 эта ошибка все еще присутствует.

+1

+1, и хуже всего становилось, когда диапазон ввода совмещался с числом ввода.

+1 за эту проблему

Столкнулись с той же проблемой: +1

да - та же проблема +1

это базовый HTML5 - каков статус по этому поводу, кто-нибудь над этим работает?

принимая во внимание это: https://github.com/danielcrisp/angular-rangeslider/issues/51
где Error: ngModel: бегунок диапазона
Я скорректировал решение @ 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, у меня такая же проблема при переключении [input type = range] с ng-if

Я также столкнулся с этой проблемой и написал об этом вопрос о переполнении стека: «В Angular атрибут bind из переменной области видимости _before_ ngModel связывает входные переменные value » . Вопрос включает в себя исполняемый фрагмент кода, воспроизводящий эту проблему.

Некоторые обходные пути были опубликованы в качестве ответов на Stack Overflow. Тот, который применим к моему случаю, включает использование DOM-манипуляции с $inputElement.prop() для установки значений min , max и step (какие бы атрибуты ни потребовались). Делая это манипуляцию DOM до моей пользовательской директивы Базового <input> «s value это первый набор, я избежать этой проблемы.

Мой ленивый способ исправить эту ошибку заключался в том, чтобы разделить минимальные / максимальные значения и значения шага на 100. Таким образом, 300 становится 3.0 и т.д., а значения падают ниже 100. Затем я умножаю значения обратно по мере необходимости. Возможно, это кому-то пригодится.

+1 Это очень обидно.

+1

+1

+1

Еще один ленивый обходной прием:

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

+1

С новой функцией Reactions на GitHub вам больше не нужно комментировать «+1». Вместо этого вы можете отметить свой интерес, щелкнув «+: smile:» в правом верхнем углу первого комментария в этом выпуске, а затем выбрав: +1: («+1»). Это позволяет избежать отправки бесполезного уведомления всем, кто подписался на эту проблему.

Я решил свою проблему методом ondrag, удалив ng-model.
проверьте это 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 (функция () {
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>