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

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

Answer 1

发生这种情况是因为 AngularJS 在您的数据上注入(inject)了一个名为 $$hashKey 的独特属性，并且当您重新加载 foodList 时，通过 ajax 获取的资源具有不同的 $$hashKey >.

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

[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