Salut les gars Je suis nouveau sur Angular, alors soyez facile. J'ai remarqué que lorsque j'essayais de supprimer un objet d'un tableau passé dans une fonction, cela supprimait l'objet du tableau dans la fonction, mais pas dans le tableau d'origine. Cela m'a dérouté parce que je pensais qu'ils étaient adoptés par référence:
function controller($scope, $http) {
var vm = this;
vm.breakfast = [ { id:1, 'name':'fruit' }, { id:2, 'name':'egg' } ];
function removeFromMeal(meal, entryId) {
meal = meal.filter (function (entry) {
return entry['id'] !== entryId;
}
}
function manageEntry(entry) {
...
// Condition to remove meal from vm.breakfast
if (...) { removeFromMeal(vm.breakfast, entry['id']); }
}
}
Le problème est que si je passe une entrée avec un ID de 1 dans manageEntry et que je définis des points d'arrêt dans removeFromMeal, je peux voir que le tableau 'repas' est filtré avec succès (c'est-à-dire que l'objet avec l'ID 1 est supprimé de vm.breakfast). Cependant, dès que cette fonction revient, elle (vm.breakfast) est exactement la même que si la fonction ne s'exécutait jamais. Je suis sûr que le problème concerne le contexte / la portée, l'utilisation de $ apply serait-elle appropriée ici quelque part?
Merci d'avance.
3 réponses
meal.filter() renvoie un nouveau tableau, il ne modifie pas le tableau d'origine. Et l'affectation à la variable meal ne fait que modifier la variable locale, elle ne modifie pas la variable ou l'objet qui a été utilisé lors de l'appel de la fonction. Les fonctions Javascript sont appelées par valeur, où la valeur peut être une référence à un tableau ou à un objet, mais ce n'est pas une référence à l'emplacement d'où provient l'objet. Vous devez écrire:
if (...) { vm.breakfast = removeFromMeal(vm.breakfast, entry['id']); }
Vous pouvez travailler sur la copie.
function manageEntry(entry) {
...
// Condition to remove meal from vm.breakfast
if (...) { removeFromMeal(angular.copy(vm.breakfast), entry['id']); }
}
J'espère que cela vous aidera
Pensez à utiliser à la place splice. Cela supprimera la valeur du tableau existant.
angular.module('app', []).controller('MyController', function($scope) {
var vm = this;
vm.manageEntry = manageEntry;
vm.breakfast = [{
id: 1,
'name': 'fruit'
}, {
id: 2,
'name': 'egg'
}];
function removeFromMeal(meal, entryId) {
for (var i = 0; i < meal.length; i++) {
var entry = meal[i];
if (entry['id'] === entryId) {
//Using splice, remove the item at index i from the meal
meal.splice(i, 1);
return;
}
}
}
function manageEntry(entry) {
// Condition to remove meal from vm.breakfast
if (true) {
removeFromMeal(vm.breakfast, entry['id']);
}
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MyController as vm">
<ul>
<li ng-repeat="entry in vm.breakfast">
{{entry.name}}
<button ng-click="vm.manageEntry(entry)">Manage {{entry.name}}</button>
</li>
</ul>
</div>
</div>