Javascript 单击复选框时，将此元素添加到收藏夹数组中+；后Ajax元素关系

食物列表中的食物

用ng REPECT打印出来。每种食物都有一个复选框

我在控制器中编写了一个ng click函数，在选中时将食物添加到数组

收藏夹

，如果未选中则将其删除。这很有效。然后，我使用相同的模板打印收藏夹中的食物

 $scope.toggleFavourite = function (food) {

   if (food.favourite === true) {
       $scope.favourites.push(food);
   } else if (food.favourite === false) {
       $scope.favourites.splice($scope.favourites.indexOf(food), 1);
   }
 }

问题1：这是一个正确的地方/一个解决这个问题的好的“角度”方法吗

问题2：我想在原始列表中的项目和收藏夹列表中的项目之间创建一个“完美镜像”——收藏夹中更改的所有输入都会反映在原始列表中，反之亦然。但是默认情况下不会选中收藏夹，即使“ng checked”=“{{food.favorite}}”，这等于收藏夹的“true”

如何确保始终选中此复选框以查看收藏夹中的食物项目

--

更新

，Favorites滑块镜像原始滑块，而无需我做任何额外的工作-元素的

$$hashKey

部分仍然相同

然而，在我的实际实现中，食物内容不断地通过Ajax重新加载。由于

$$hashKey

不同，元素值之间的“连接”丢失

我正在寻找一种有效的方法，根据稳定的东西（比如Food.uid），观察最喜欢的食物和食物中的食物输入的变化。如果uid=X的食物的一个实例的值已更新，则另一个实例将更新以反映这一点

---

我怎样才能做到这一点？

在您的

foodtemplate.html

中，您已选中收藏夹复选框的

ng=“{food.favorite}”

，而不是

ng checked=“food.favorite”

---

我不确定我是否理解更新中的问题。

为什么不观看整个

食品

和

收藏夹

以了解变化？谢谢-这有助于解决复选框问题。我试图实现一个$watchforchanges，但从前面的问题和小提琴开始，我的工作很艰难。我无法解决的问题：如果我的$watch在指令中，在DOM或$scope中与“food”模型无关，那么当$watch注册了一个更改时，我如何访问该“food”模型？我需要知道哪些“食物”被改变了，这样我就可以比较和跟踪两组食物的变化。以下是一个Plunkr，当输入发生更改时，它只打印“更新的”：