angular.js предотвращает пустое число

Question

angular.js предотвращает пустое число

0

Я пытаюсь заставить номер ввода с обязательным атрибутом всегда иметь некоторое значение, а на пустом - ноль.
<input ng-model='someModel' required>
Я создал следующую директиву:

App.directive('input', function () {
    return {
        scope: {},
        link: function ($scope, $element, $attrs) {
            if ($attrs.type == 'number') {
                if ($element[0].required) {
                    $element.on('blur', function(){
                        if(this.value===''){
                            this.value=0;
                        }
                    });
                }
            }
        }
    };
});

Я знаю, что использование this.value неверно, потому что оно изменяет значение, а не область. но я не знаю, как изменить масштаб. $scope.value вообще не работает.
Я хочу, чтобы эта директива была как можно более общей, поэтому я не хочу указывать в области имя модели.

Wazime 26 июнь 2015, в 02:36

Источник

Теги:

javascript

angularjs

angularjs-directive

3 ответа

0

Я лично использовал бы isNaN(parseInt('')) поскольку я думаю, что он более явный, чем точные. Оба будут работать точно, но не сразу понятно, что вы проверяете отсутствие входа.

Это решение выглядит беспорядочным для меня, но это шаг в правильном направлении. Может быть, кто-то, у кого больше опыта, мог бы посмотреть на него.

App.directive('input', function () {
    return {
        scope: {},
        link: function ($scope, $element, $attrs, ngModel) {
            if ($attrs.type == 'number') {
                if ($element[0].required) {
                    $element.on('blur', function(){
                        if(isNaN(parseInt(ngModel.$viewValue))){
                            scope.$apply(function(){
                              ngModel.$viewValue = 0;
                            }
                        }
                    });
                }
            }
        }
    };
});

Kadajett 25 июнь 2015, в 23:35

0

AngualarJS:

var replaceWithZeros = (function(angular) {
  "use strict";
  var demo = angular.module('demo', []);
  demo.controller('demoCtrl', function($scope) {
    $scope.someModel = '0.00';
    $scope.someFunction = function(curVal) {
      if (!curVal) {
        $scope.someModel = '0.00';
      }
    };
  });
})(window.angular);

HTML:

<main ng-app="demo" ng-controller="demoCtrl">  
  <input ng-model="someModel" ng-blur="someFunction(someModel)" required="required"/>
</main>

Heres the demo, чтобы показать, что все это работает вместе, разметка находится в HTML выше, однако в демоверсии в надежде, что это не приведет к путанице.

http://codepen.io/nicholasabrams/pen/xGPvJd

Alpha G33k 25 июнь 2015, в 23:00

Ещё вопросы

rgaskill · Accepted Answer · 2015-06-25T23-33-00.000Z

Вот еще один подход.

App.directive('input', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs) {
            if (attrs.type === 'number' && attrs.required) {

                function update() {
                  if (!scope[attrs.ngModel]) {
                    scope.$apply(function() {
                      scope[attrs.ngModel] = 0;
                    });
                  }
                }

                element.on('blur', update)

                // remove listener when scope is destroyed
                scope.$on('$destroy', function() {
                  element.off('blur', update)
                })

            }
        }
    };
});

http://plnkr.co/edit/4yDTNUfdpu2ql1EmTZ3B?p=preview