javascript - AngularJS:如果在内容重新加载之前但不是之后还没有，则将元素添加到数组

Question

我有一些与食物相关的输入。用户可以从选择列表中选择“单位”并使用 AngularUI slider 输入数量。当用户输入任何食物的单位或数量值时，食物及其值将添加到数组 editedFoods。

单击类别标题时，我的页面通过 http 请求加载内容。 editedFoods 数组的目的是它可用于在内容重新加载后保留用户选择的值。

目前，editedFoods 中的一个元素与其原始食物元素保持实时连接，直到重新加载内容。然后更改的食物元素被视为新元素并新添加到数组中。

当更改选择或 slider 时，我调用 addSelection(food)。这会检查食物是否已经在数组中，如果没有，则通过检查 indexOf food 来添加它:

 //Add changed food to array 
 $scope.editedFood = [];

 // toggle selection for a given food
 $scope.addSelection = function addSelection(food) {
 var idx = $scope.editedFood.indexOf(food);
  
 // is currently selected
 if (idx === -1) {
   $scope.editedFood.push(food);
 }

现在，这一直有效，直到食物类别被重新加载。在那之后，它会添加一个新的食物元素，即使已经存在匹配的元素也是如此。

Here's the Plunkr

为什么它在 editedFood 中找不到 food，并在重新加载 Food 内容后重新添加它？我能否通过搜索比 food 更具体的内容来改进此搜索 - 例如食物的唯一 ID (food.uid) - 以便此限定符即使在重新加载后也能正常工作？

Answer 1

这是因为 AngularJS 在你的数据上注入(inject)了一个名为 $$hashKey 的独特属性，当你重新加载你的 foodList 时，通过 ajax 获得的资源有一个不同的 $$hashKey.

如果你 console.log 你编辑的食物(在重新加载之前和之后编辑)你会看到这个:

[Object, Object]
0: Object
    $$hashKey: "004"
    code: "X 39 2000000"
    final_factor: "0"
    slider: 7
    sorting: "0"
    title: "Nussbrot"
    uid: "56"
    unit: Array[2]
    __proto__: Object
1: Object
    $$hashKey: "00B"
    code: "X 39 2000000"
    final_factor: "0"
    slider: 5
    sorting: "0"
    title: "Nussbrot"
    uid: "56"
    unit: Array[2]
    __proto__: Object

注意 $$hashKey 有何不同。这就是 indexOf 函数在重新加载后不起作用的原因。

您应该实现自己的 indexOf，它只在基本属性(可能是 uid)中查找。

编辑:你可以这样做:

myApp.filter('find', function(){
  return function(food, foods) {
    for (var index in foods) {
      if (foods[index].uid == food.uid) {
        return index;
      }
    }
    return -1;
  }
});

并且，在您的 Controller 中:

var idx = $filter('find')(food, $scope.editedFood);

不要忘记在您的 Controller 上注入(inject) $filter 依赖项。

Working Plunker