Suis confronté à un problème d'affichage de la valeur sélectionnée dans le menu déroulant angulaire. Ça fonctionne quand je donne comme ça
$scope.selectedItem = $scope.items[1];
Ne fonctionne pas, si je donne directement cette valeur
$scope.selectedItem = { name: 'two', age: 27 };
HTML :
<html ng-app="app"> <body> <div ng-controller="Test"> <select ng-model="selectedItem" ng-options="item.name for item in items"> </select> </div> </body> </html>
JS :
var app = angular.module('app',[]); app.controller('Test',function($scope){ $scope.items = [{name: 'one', age: 30 },{ name: 'two', age: 27 },{ name: 'three', age: 50 }]; $scope.selectedItem = $scope.items[1]; });
CODEPEN: http://codepen.io/anon/pen/zxXpmR
SOLUTION:
Merci samir-das. J'ai réparé selon votre suggestion.
var choosen_value = { name: 'two', age: 27 }; angular.forEach($scope.items, function(item){ if(angular.equals(choosen_value, item)){ $scope.selectedItem = item; } });
Eh bien, parce que
$scope.items[1]
et { name: 'two', age: 27 }
est une chose totalement différente.
{ name: 'two', age: 27 }
est un objet totalement différent alors que $scope.items[1]
fait partie de l'objet $scope.items
Lorsque vous mettez quelque chose dans le modèle en utilisant {{}}
, angulaire, ajoutez-le dans sa liste d'observateurs.
Donc, lorsque l'angulaire l'a mis dans la liste de surveillance, c'était un objet (c'est-à-dire { name: 'two', age: 27 }
) qui est différent de $scope.items
.
selectedItem
est attaché avec l'objet que vous avez configuré dans le contrôleur. En résumé, les contrôles de vérification sont selectedItem
fonction de { name: 'two', age: 27 }
NON contre $scope.items
J'espère que vous comprenez ce que je veux dire
Comme expliqué dans les autres réponses, alors que les deux objets peuvent avoir les mêmes propriétés et valeurs, ils sont deux objets différents, de sorte que les angulaires ne les considèrent pas comme égaux.
Vous pouvez cependant utiliser la track by
expression dans ng-options pour spécifier une propriété qui décidera de l'égalité:
ng-options="item.name for item in items track by item.name"
Ce n'est pas une caractéristique / problème angulaire, c'est une conséquence de la façon dont l'égalité d'objet fonctionne en version Javascript. Cet article fait un bon travail pour expliquer ce qui se passe de manière assez concise et donne quelques exemples. Vérifiez la source de la méthode isEqual de lodash (cela vous amènera à la définition de baseIsEqualDeep
éventuellement) pour voir comment ce que vous essayez d'atteindre peut être fait dans JS pur.
Dans tous les cas, je ne pense pas qu'il existe un moyen simple d'atteindre Angular, il faudrait re-écrire la façon dont ng-options
fonctionne et vous ne voulez probablement pas y aller …
En angulaire, les tableaux et les objets sont transmis par référence tandis que les chaînes, les nombres et les booléens sont passés en valeur. Ainsi, angulaire interprète $scope.items[1]
et { name: 'two', age: 27 }
comme deux objets différents. C'est pourquoi votre lien échoue quand vous faites $scope.selectedItem = { name: 'two', age: 27 };
Directement et trouvez-le dans '$ scope.items'.