1

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

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

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

当更改选择或滑块时，我致电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);
 }

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

这是Plunkr

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

4

1 回答 1

4

发生这种情况是因为 AngularJS 为$$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;
  }
});

并且，在您的控制器中：

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

不要忘记注入$filter对控制器的依赖。

工作小插曲

于 2013-11-05T18:40:11.533 回答