Question

当我使用我拥有具有selectedOptions属性的对象时，它不会显示在下拉列表中。但是，当我放入范围并从对象中选择然后显示它。任何人都知道为什么第一个不起作用。这是plunker链接。

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>

Answer 1

Angular使用严格比较（===）来评估是否要选择给定选项。仅当selectedItem的值与选项的值相同时才会出现。在JavaScript中，如果您创建两个具有相同结构的对象并尝试严格比较它们，它们就不一样了，即：

{a: 1} !== {a: 1}

在第二个例子中，你保持对原始对象的引用，所以它就像这样：

var obj1 = {a: 1};
var obj2 = obj1;
obj1 === obj2;

选定的选项未显示Angularjs下拉列表

1 个答案: