2

我正在尝试进行模拟的输入，type="number"但我想向其中添加自己的按钮。基本上我已经做了

<form name="fasdf">
    <button class="btn" ng-click="decrement()">&#9668;</button>
    <input type="text" ng-model="model" display-as-number />
    <button class="btn" ng-click="increment()">&#9658;</button>
</form>

我正在使用input type="text"，因为我不希望用户代理将它自己的按钮添加到该字段。

应该可以使用它input本身来输入一个值，也可以使用按钮来增加或减少值。

angular.module('app',[])
.controller('Ctrl', ['$scope', function($scope) {

  $scope.model = 0;

  $scope.decrement = function() {
    $scope.model--;
  };

  $scope.increment = function() {
    $scope.model++;
  };

}])

该值最初是0，但是当用户开始输入文本时，我希望在他们键入时去掉任何前导零（嗯，实际上西装想要这样，但你明白我的意思）。

我的理论是我可以使用 a$formatter和/或 a$parser通过创建访问ngModelController.

angular.module('app')
.directive('displayAsNumber', [function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, controller) {

        controller.$formatters.push(function (modelValue) {
            var value = parseInt(modelValue, 10);
            return value;
        });

        controller.$parsers.push(function (viewValue) {
            var value = parseInt(viewValue, 10);
            return value;
        });          
    };
}]);

但是，虽然$formatter每次我在输入中键入内容时都会运行它，但它并没有覆盖输入字段的实际值，换句话说，它没有去除任何前导零。

通过用

element.on('focus', function() {
  var value = parseInt(element.val(), 10);
  if (value === 0)
    element.val('');
});

element.on('focusout', function() {
  if ('' === element.val().trim())
    element.val(0);
  else
    element.val(parseInt(element.val(), 10));
});

由此产生的行为已经足够好（如果值是0，它会在焦点上消隐字段，并在焦点输出0s时去除前导。

问题是，有没有什么方法可以在不添加事件侦听器的情况下实现这种行为element？如何正确控制如何使用 渲染输入ngModelController？

Plnkr：http ://plnkr.co/edit/YOkFGNGamfA1Xb9pOP1U?p=preview

4

1 回答 1

3

所以，是的，在查看了其他新问题之后，我看到了这个并意识到我只是错过了一个电话controller.$render()

controller.$parsers.push(function (viewValue) {
  var value = parseInt(viewValue, 10);
  controller.$viewValue = value;
  controller.$render();
  return value;
});

解决了我的问题。我现在就走。

于 2013-10-22T08:08:19.073 回答