0

看看这个小提琴：http: //jsfiddle.net/bwjbz/6/

我正在尝试严格执行正整数。我已经尝试了几种途径，但我似乎无法得到我正在寻找的东西。（如果您尝试几次，您最终可能会得到一个非数字或负数来粘贴输入）。

除了上面的小提琴，我还尝试过使用数字过滤器并尝试创建自己的指令。

号码过滤器：

<input type="number" min="0" max="1000" value="{{itm.qty | number:0}}" required data-ng-model="itm.qty" data-ng-change="setQty()" data-whole-number>

您会注意到数据整数指令。我对指令还不是很满意，但就是这样：

app.directive('wholeNumber', function() {
  return function(scope, elem, attrs) {
    elem.on("blur", function() {
      var num;
      num = parseInt(elem.val(), 10);
      num = Math.abs(num);
      scope.$apply(elem.val(num));
    });
  };
});

指令本身会进行正确的 DOM 操作，但模型不会使用新值进行更新。

所以这个问题有两个方面：

  1. 小提琴可以在模型上设置正确的值，但模型文本不会更新。但是，在另一种方法中，我将模型 itm 的数量设置为 1，它会同时更改模型和可见值。您会注意到它实际上确实正确地更改了模型（例如，当值设置为 1.56 时，请注意绑定，足球数 = 1）。

  2. 为什么指令不传播对模型的更改？

提前非常感谢，-布赖恩

4

2 回答 2

3

更新：使用指令工作小提琴：http: //jsfiddle.net/mrajcok/U7Je2/

要点：

<input type="number" min="0" max="{{maxValue}}" data-ng-model="itm.qty" whole-number>

link: function(scope, elem, attrs) {
        elem.on("blur", function() {
            var num = Math.abs(parseInt(elem.val(), 10));
            num = num > scope.maxValue ? 0 : num;
            scope.itm.qty = num
            scope.$apply();

            // or, the above two lines can be rewritten as
            scope.$apply(scope.itm.qty = num);

        // or, the blur function can be rewritten as
        elem.on("blur", function() {
            scope.$apply(function() {
                var num = Math.abs(parseInt(elem.val(), 10));
                num = num > scope.maxValue ? 0 : num;
                scope.itm.qty = num;
            });
        });

原“答案”：

关于你的第一个小提琴，最近在 SO 上出现了类似的问题，请参阅AngularJS - reset of $scope.value doesn't change value in template (random behavior)

如果我们将该帖子中的 $timeout 解决方案应用于您的问题，请将 setQty() 逻辑包装在 $timeout 函数中，它会起作用。看到这个小提琴。我说“有点”是因为可以输入像“2-2-3-4”这样的“数字”，“abc”也可以。当你改变焦点时，那些虚假的价值就会变得清晰。Angular 似乎没有为这些虚假条目调用 setQty() ......我不知道为什么。

于 2012-09-08T00:59:26.250 回答
0

标记，

您的解决方案的问题是指令需要知道绑定变量的名称。一个更有用的解决方案是匿名更新它（并调用任何关联的事件），以便可以在绑定到任何控制器的任何部分 html 上使用该指令：

// update the bound scope variable and if exists call the change function
var evalStr = attrs.ngModel + '=' + num.toString();
if (typeof attrs.ngChange != 'undefined')
{
  evalStr += ';'+attrs.ngChange;
}
scope.$apply(evalStr);

请注意，评估 'evalStr' 作为 scope.$apply 参数的优势意味着 AngularJS 向控制台报告任何异常并且应用程序可以继续。

于 2013-04-18T05:31:10.063 回答