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

Add this element to a Favourites array when the checkbox is clicked + post-Ajax element relationship

本文关键字：元素 数组 关系 Ajax 收藏夹 添加 复选框 单击      更新时间：2023-09-26

Food in foodslist用ng-repeat打印出来。每种食物都有一个复选框。

我在控制器中编写了一个 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：这是解决这个问题的正确地方/一个好的，"棱角"的方法吗？

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

如何确保在收藏夹中始终选中此复选框以显示食品？

见普伦克

尔

--

更新

在第一个 Plunkr 中，收藏夹滑块镜像了原始滑块，而无需我做任何其他工作 - 元素的$$hashKey部分仍然相同。

然而，在我的实际实现中，食物内容通过Ajax不断重新加载。由于$$hashKey不同，因此元素值之间的"连接"将丢失。

这是第二个 Plunkr 通过 Ajax 加载内容，以便输入值未连接。

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

我该怎么做？

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

我

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

相关文章：