admin管理员组

文章数量:1391951

I have some food-related inputs. A user may select "unit" from a select list and enter a quantity using an AngularUI slider. When a user enters a unit or quantity value for any food, the food and its values are added to an array, editedFoods.

My page loads content via http requests when a category header is clicked. The intention of the editedFoods array is that it may be used to persist the user-selected values after a content reload.

Currently, an element in editedFoods maintains a live connection to its original food element, UNTIL the content is reloaded. Then the changed food element gets treated as a new element and added newly to the array.

When a select or slider is changed, i call addSelection(food). This checks if the food is already in the array, and if not, adds it, by checking the 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);
 }

Right now, this works until the food category gets reloaded. After that happens, it adds a new food element even if a matching one already exists.

Here's the Plunkr

Why does it not find food in editedFood, and add it anew, after the Food content is reloaded? Can I improve this search by searching for something more specific than food- e.g the food's unique id (food.uid)- so that this qualifier works even after reload?

I have some food-related inputs. A user may select "unit" from a select list and enter a quantity using an AngularUI slider. When a user enters a unit or quantity value for any food, the food and its values are added to an array, editedFoods.

My page loads content via http requests when a category header is clicked. The intention of the editedFoods array is that it may be used to persist the user-selected values after a content reload.

Currently, an element in editedFoods maintains a live connection to its original food element, UNTIL the content is reloaded. Then the changed food element gets treated as a new element and added newly to the array.

When a select or slider is changed, i call addSelection(food). This checks if the food is already in the array, and if not, adds it, by checking the 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);
 }

Right now, this works until the food category gets reloaded. After that happens, it adds a new food element even if a matching one already exists.

Here's the Plunkr

Why does it not find food in editedFood, and add it anew, after the Food content is reloaded? Can I improve this search by searching for something more specific than food- e.g the food's unique id (food.uid)- so that this qualifier works even after reload?

• javascript
• arrays
• angularjs

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Nov 5, 2013 at 18:23 IlaIla 3,54888 gold badges5050 silver badges7878 bronze badges 4

• what do you mean by reloaded? – charlietfl Commented Nov 5, 2013 at 18:30
• I mean that clicking on a category title runs the function loadFood(), which runs a HTTP request to a JSON file. The content of a food category is totally removed from the DOM if it is not currently selected. On the Plunkr there is only one category of food, but there will be many. – Ila Commented Nov 5, 2013 at 18:36
• sounds like you need to set up caching for your data in a service. Read $http docs recarding cache. And should find numerous tutorials that should help – charlietfl Commented Nov 5, 2013 at 18:38
• @Ali I updated my answer with a working plunker. – D.Evangelista Commented Nov 5, 2013 at 18:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

It's happens because AngularJS injects a unique property called $$hashKey on your data and, when you reload your foodList, the resources got via ajax has a different $$hashKey.

If you console.log your editedFood (edited after and before reload) you will see this:

[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

Note how the $$hashKey differs. That's what make the indexOf function doesn't works after reload.

You should implement your own indexOf that looks only in the essential property (problably the uid).

Edit: You can do like this:

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

And, in your controller:

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

Don't forget to inject the $filter dependency on your controller.

Working Plunker

本文标签：