javascript - 修改ng-repeat的源数据

Question

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

Controller

    $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除了在应用程序启动时执行某些操作之外。否则，您最终会得到现在所拥有的: View 中的逻辑(调用 getItem(id) )而不是它所属的模型。

相反，请使用ng-repeat重复您想要显示的准确数据。正如我之前所说，这意味着需要重新排列一些代码。例如，您可以使用函数动态生成用户当前的项目列表。看看这个 fiddle :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 中调用它功能。