项目添加到阵列时NG-列表输入不更新 [英] ng-list input not updating when adding items to array

问题描述

我运行到哪里将项目添加到模型时使用NG-列表中输入未更新一个奇怪的问题。我创建了一个小提琴，以更好地说明这个问题： http://jsfiddle.net/rtZY3/

I'm running into a strange issue where an input using ng-list isn't updating when adding items to the model. I've created a fiddle to better illustrate the issue: http://jsfiddle.net/rtZY3/

// Doesn't update ng-list input
$scope.tags.push(tag);

// Does update ng-list input
var tags = angular.copy($scope.tags);
tags.push(tag);
$scope.tags = tags;

这似乎并不像预期的行为，尤其是 $ scope.tags 正在正确的＆LT所示更新; pre＆GT; 中的jsfiddle标签上方

This doesn't seem like expected behavior, especially since $scope.tags is being properly updated as illustrated by the <pre> tag in the jsFiddle above.

推荐答案

好了，这很有趣。我挖成unminified AngularJS源$ C ​​$ c代表的 ngList指令。

Ok, so this was interesting. I dug into the unminified AngularJS source code for the ngList directive.

这似乎与第一实施例不触发格式化功能，这是一个分割数组值到显示在​​输入字段以逗号分隔的字符串的功能。

It seems as the first example doesn't trigger the formatter function, which is the function that splits the array values into a comma separated string that is displayed in the input field.

进一步的调查表明，错误在于ngModel指令的<一个href=\"https://github.com/angular/angular.js/blob/v1.0.5/src/ng/directive/input.js#L876\">controller.如果值是严格不等于previous价值格式化只调用，而是因为它是你的第一个例子相同的数组实例，该语句计算结果为false，因此文本字段不会更新。 看到源$ C ​​$ C 。

Further investigation shows that the error lies in the ngModel directive's controller. Formatters are only invoked if the value is strictly not equal to the previous value, but since it is the same array instance in your first example, that statement evaluates to false, and hence the text field isn't updated. See the source code.

$scope.$watch(function ngModelWatch() {
    var value = ngModelGet($scope);

    // $modelValue and value is the same array instance in your first example
    if (ctrl.$modelValue !== value) {
        // ...
    }
});

在你的第二个例子中，你创建一个新的数组实例每次，因此格式化中运行。

In your second example you create a new array instance each time and hence the formatters are run.

这篇关于项目添加到阵列时NG-列表输入不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！