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

Question

使用ng-repeat打印出

Food in foodslist。每个食物都有一个复选框。

我已在控制器中编写了一个ng-click功能，以便在检查时将食物添加到数组favourites，如果未选中则将其删除。这有效。然后，我使用相同的模板打印food in favourites。

 $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：这是一个合适的地方吗？＆＃34; Angular＆＃34;解决这个问题的方法？

问题2：我想创造一个完美的镜子＆＃34;在原始列表中的项目与收藏夹列表中的项目之间 - 在收藏夹上更改的所有输入都会反映在原始列表中，反之亦然。但默认情况下不会检查收藏夹，即使＆＃34; ng-checked＆＃34; =＆＃34; {{food.favourite}}＆＃34;，等于＆＃34; true＆＃34;为收藏夹。

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

See Plunkr

-

更新

In the first Plunkr，“收藏夹”滑块可以反映原始滑块，而无需执行任何其他工作 - 元素的$$hashKey部分仍然相同。

然而，在我的实际实现中，Food内容不断通过Ajax重新加载。因为$$hashKey不同，所以＆＃34;连接＆＃34;元素的值之间丢失了。

Here's a 2nd Plunkr loading the content via Ajax so that the input values are not connected.

我正在寻找一种有效的方法来监视收藏夹和食物中食物的输入变化，基于稳定的东西（例如food.uid）。如果uid = X的食物的一个实例更新了值，则另一个实例将更新以反映这一点。

我该怎么做？

Answer 1

在foodtemplate.html中，您有ng-checked="{{ food.favourite }}"个收藏夹复选框而不是ng-checked="food.favourite"

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