Question

我有一个类似于以下示例的应用程序，我无法弄清楚为什么源数据没有更新。更多信息在示例注释中。我确信这是一个我忽略的微不足道的问题。

控制器

    $scope.items = [
        { id: 1, color: 'red', title: 'car' },
        { id: 2, color: 'blue', title: 'sky' },
        { id: 3, color: 'transparent', title: 'nothing' }
    ]
    $scope.favoriteIds = [1, 2, 3]
    $scope.getItem = function(id) { /* returns an item with given id */ }

最后，有两种方法可以修改$scope.items，但只有第一种方法有效，因为新项目的不是已知的 ID。

    $scope.changeData1 = function() {
        $scope.items = [{ id: 666, color: 'ugly', title: 'face' }]
        $scope.favoriteIds = [666]
    }

    $scope.changeData2 = function() {
        $scope.items = [{ id: 1, color: 'ugly', title: 'face' }]
        $scope.favoriteIds = [1]
    }

查看

<h1>Favourite items</h1>

<ul ng-repeat="id in favoriteIds" data-ng-init="item = getItem(id)">
    <li>I like my {{ item.color }} {{ item.title }}</li>
</ul>

<button ng-click="changeData1()">Modify data</button>
<!-- prints: I like my ugly face -->

<button ng-click="changeData2()">Modify nothing</button>
<!-- prints: I like my red car -->

问题是，我需要使用第二种方法来修改数据。

http://jsfiddle.net/4pEpN/7/

Answer 1

我对Angular也比较陌生，所以如果有一个简单的方法可以做到这一点，我不知道它是什么（不幸的是，Angular文档非常糟糕）。无论如何，你可以通过重新思考你的代码结构来避免这种情况（你最终会得到一个更好的程序）。

在您的视图中，您在ng-init循环的每次迭代期间使用getItem在id上致电ng-repeat。这就是造成问题的原因，而且（显然）是由于Angular性能特征（更多在this question）。

基本上，请不要使用ng-init，除非在您的应用启动时执行某些操作。否则，你最终会得到你现在拥有的东西：视图（调用getItem(id)）中的逻辑，而不是它所属的模型。

而是使用ng-repeat重复您想要显示的完全数据。就像我之前说过的，这意味着一些代码重新排列。例如，您可以使用函数动态生成用户的当前项列表。看看这个小提琴：http://jsfiddle.net/4pEpN/19/

请参阅我在该代码中对我所做的所有更改的评论，但最相关的是：

$scope.favoriteItems = function() {
    var favObjs = [];
    for (var i = 0; i < favoriteIds.length; ++i) {
        favObjs.push(getItem(favoriteIds[i]));
    }
    return favObjs;
};

然后在您看来：<ul ng-repeat="item in favoriteItems()">

您还可以使用许多其他方法。例如，您可以使用update函数，该函数处理任何用户输入后可能需要完成的任何操作（包括更新用户的自定义项目数组）。然后，您可以在changeData函数中调用它。

Answer 2

我不认为ng-init是合适的，因为它只影响模板初始化。那么如何调用getItem(id)来获取每个属性，如下所示： http://jsfiddle.net/JrvbD/1/

修改ng-repeat的源数据

2 个答案: