Когда я использую объект, где у меня есть свойство, которое выбралоOptions, оно не отображается в раскрывающемся списке. Однако, когда я помещаю в область действия и выбираю из объекта, то он отображается. У любого есть идея, почему первый не работает. Вот ссылка на плункер.
http://plnkr.co/edit/XLuXmAmh4F9OobyJhBCW?p=preview
var app = angular.module('angularjs-starter', []);
var model = {
options : [
{ id: 1, name: 'foo' },
{ id: 2, name: 'bar' },
{ id: 3, name: 'blah' }],
selectedOption : { id: 1, name: 'foo' }
}
app.value('vm',model);
app.controller('MainCtrl', function($scope,vm) {
$scope.vm =vm;
$scope.items = [
{ id: 1, name: 'foo' },
{ id: 2, name: 'bar' },
{ id: 3, name: 'blah' }];
$scope.selectedItem = $scope.items[1];
});
<body ng-controller="MainCtrl">
<h1>Select something below</h1>
<select id="s1" ng-model="selectedItem" ng-options="item as item.name for item in items"></select>
<h3>The selected item:</h3>
<pre>{{selectedItem | json}}</pre>
<h3>The inner html of the select:</h3>
<pre id="options" class="prettify html"></pre>
<select data-ng-options="o.name for o in vm.options" data-ng-model="vm.selectedOption"><option value="">Select one</option></select>
<pre>{{vm.selectedOption | json}}</pre>
</body>
Угловое использует строгое сравнение (===
), чтобы оценить, будет ли выбран данный параметр. Это будет только в том случае, если значение selectedItem
совпадает с значением параметра one. И в JavaScript, если вы создаете два объекта одной и той же структуры и пытаетесь строго сравнить их, они не совпадают, то есть:
{a: 1} !== {a: 1}
Во втором примере вы сохраняете ссылку на исходный объект insted, поэтому было бы так:
var obj1 = {a: 1};
var obj2 = obj1;
obj1 === obj2;