AngularJS-设置模型属性不更新输入文本（数字验证）

看看这把小提琴：

我试图严格执行正整数。我尝试了好几种途径，但我似乎找不到我想要的。（如果您尝试了几次，最终可能会得到一个非数字或负数，以粘贴在输入中）

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

数字过滤器：

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

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

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

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

为什么指令没有传播对模型的更改

先谢谢你， -布莱恩更新： 使用指令操作小提琴：

要点：

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

链接：功能（范围、要素、属性）{
元素开启（“模糊”，函数（）{
var num=Math.abs（parseInt（elem.val（），10））；
num=num>scope.maxValue？0:num；
scope.itm.qty=num
作用域：$apply（）；
//或者，上述两行可以重写为
范围$apply（scope.itm.qty=num）；
//或者，模糊函数可以重写为
元素开启（“模糊”，函数（）{
作用域$apply（函数（）{
var num=Math.abs（parseInt（elem.val（），10））；
num=num>scope.maxValue？0:num；
scope.itm.qty=num；
});
});

原始“答复”：

关于你的第一把小提琴，最近出现了一个类似的问题，参见

如果我们将那篇文章中的$timeout解决方案应用到您的问题中，将setQty（）逻辑封装在$timeout函数中，它就会工作。请参阅。我说“sort of”，是因为可以输入“2-2-3-4”这样的“数字”，也可以输入“abc”。当您更改焦点时，这些伪值会清除。看起来Angular没有调用setQty（）对于这些伪造的条目…我不知道为什么。

更新： 使用指令操作小提琴：

要点：

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

链接：功能（范围、要素、属性）{
元素开启（“模糊”，函数（）{
var num=Math.abs（parseInt（elem.val（），10））；
num=num>scope.maxValue？0:num；
scope.itm.qty=num
作用域：$apply（）；
//或者，上述两行可以重写为
范围$apply（scope.itm.qty=num）；
//或者，模糊函数可以重写为
元素开启（“模糊”，函数（）{
作用域$apply（函数（）{
var num=Math.abs（parseInt（elem.val（），10））；
num=num>scope.maxValue？0:num；
scope.itm.qty=num；
});
});

原始“答复”：

关于你的第一把小提琴，最近出现了一个类似的问题，参见

如果我们将那篇文章中的$timeout解决方案应用到您的问题中，将setQty（）逻辑封装在$timeout函数中，它就会工作。请参阅。我说“sort of”，是因为可以输入“2-2-3-4”这样的“数字”，也可以输入“abc”。当您更改焦点时，这些伪值会清除。看起来Angular没有调用setQty（）对于这些伪造的条目…我不知道为什么。

马克

您的解决方案存在的问题是该指令需要知道绑定变量的名称。更有用的解决方案是匿名更新它（并调用任何相关事件），以便该指令可用于绑定到任何控制器的任何部分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向控制台报告任何异常，应用程序可以继续运行。

Mark

您的解决方案存在的问题是该指令需要知道绑定变量的名称。更有用的解决方案是匿名更新它（并调用任何相关事件），以便该指令可用于绑定到任何控制器的任何部分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会向控制台报告任何异常，应用程序可以继续运行。

我对这个答案很满意。它做了我需要它做的事情。如果你觉得特别慷慨，也许你可以解释一下为什么我的指令无法满足你的要求更新模型？我没有足够的分数来投票，但我很感激：）@bfricka，现在我已经有一些时间开始学习更多关于指令的内容，请参阅我的更新答案。需要在链接函数中更新范围/模型，$apply不需要任何参数。感谢Mark，我也一直在更多地使用指令。当AngularJS文档深入我的理解时，这将是一件很棒的事情这些功能强大但复杂的领域。由于指令的构造方法很多，而且缺乏对每个步骤的DOM元素/事件生命周期的清晰解释（因此，如何有效地使用其中的$apply、$defer、$q等），因此指令的学习非常复杂。无论如何，感谢您的更新。谢谢您，马克。我尝试使用

orderBy:sorting

过滤器对列表进行排序，并更改指令中的变量。我发现，当列表中的每个项目都是从模板生成时，通过更新过滤器变量

sorting

来使用列表是不可能的。我猜这是一个s处理事情。我对这个答案很满意。它做了我需要它做的事情。如果你觉得特别慷慨，也许你可以解释一下为什么我的指令是fa