Le menu déroulant AngularJS ne montre pas la valeur sélectionnée

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"

http://codepen.io/anon/pen/WbWMrp

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'.