Javascript 修改ng repeat的源数据

我有一个类似于下面例子的应用程序，我不明白为什么源数据没有更新。更多信息见示例注释。我相信这是我忽略的一个小问题

控制器

$scope.items=[
{id:1，颜色：'red'，标题：'car'}，
{id:2，颜色：'蓝色'，标题：'天空'}，
{id:3，颜色：'transparent'，标题：'nothing'}
]
$scope.favoriteId=[1,2,3]
$scope.getItem=函数（id）{/*返回具有给定id的项*/}

最后，有两种方法可以修改

$scope.items

，但是只有第一种方法有效，因为新项的id未知

$scope.changeData1=函数（）{
$scope.items=[{id:666，颜色：“丑陋”，标题：“脸”}]
$scope.favoriteId=[666]
}
$scope.changeData2=函数（）{
$scope.items=[{id:1，颜色：“丑陋”，标题：“脸”}]
$scope.favoriteId=[1]
}

查看

喜爱的项目

我喜欢我的{{item.color}{{{item.title}}

修改数据
不修改任何内容

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

---

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

在您看来，在

ng repeat

循环的每次迭代期间，您都在使用

ng init

调用

id

上的

getItem

。这就是造成问题的原因，而且（显然）是由于角度性能特性（更多信息）

基本上，不要使用

nginit

，除非在应用程序启动时执行某些操作。否则，您将得到您现在拥有的：视图中的逻辑（调用

getItem（id）

）而不是它所属的模型

相反，请使用

ng repeat

对要显示的确切数据进行重复。就像我之前说的，这意味着一些代码重新排列。例如，可以使用函数动态生成用户的当前项目列表。看看这把小提琴：

有关我所做的所有更改，请参见我在该代码中的注释，但最相关的更改是：

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

$scope.favoriteItems=函数（）{
var favObjs=[]；
对于（变量i=0；i

然后在您的视图中：

---

---

你也可以使用很多其他方法。例如，您可以有一个

update

函数，它处理任何用户输入后可能需要执行的任何操作（包括更新用户的自定义项目数组）。然后你可以在你的

changeData

函数中调用它。

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

在您看来，在

ng repeat

循环的每次迭代期间，您都在使用

ng init

调用

id

上的

getItem

。这就是造成问题的原因，而且（显然）是由于角度性能特性（更多信息）

基本上，不要使用

nginit

，除非在应用程序启动时执行某些操作。否则，您将得到您现在拥有的：视图中的逻辑（调用

getItem（id）

）而不是它所属的模型

相反，请使用

ng repeat

对要显示的确切数据进行重复。就像我之前说的，这意味着一些代码重新排列。例如，可以使用函数动态生成用户的当前项目列表。看看这把小提琴：

有关我所做的所有更改，请参见我在该代码中的注释，但最相关的更改是：

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

$scope.favoriteItems=函数（）{
var favObjs=[]；
对于（变量i=0；i

然后在您的视图中：

---

---

你也可以使用很多其他方法。例如，您可以有一个

update

函数，它处理任何用户输入后可能需要执行的任何操作（包括更新用户的自定义项目数组）。然后您可以在

changeData

函数中调用它。

我认为

ng init

不合适，因为它只影响模板初始化。 那么，调用

getItem（id）

获取每个属性怎么样，如下所示：

---

我认为

ng init

不合适，因为它只影响模板初始化。 那么，调用

getItem（id）

获取每个属性怎么样，如下所示：

---

谢谢你的回答，我同意不恰当地使用

ng init

。不幸的是，在一个实际的应用程序中，模板比这个例子要复杂得多，所以多次调用

getItem（id）

对性能来说并不是很好。嗯，我建议在没有重复调用的情况下，正确的方法是在ng repeat的表达式中添加一个基于FavoriteId的过滤器。但在测试中，angular似乎将过滤器视为静态的，实际上只是观察它的输入。您可以看到我上一个jsfiddle的/2/，但是尝试注释对items的更改，您将看到它并没有真正关注过滤器