选择的选项没有显示Angularjs下拉列表

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

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>

来源

2015-06-27 Rupesh Kumar Tiwari

如何使这工作，我做了这个工作通过使用selectedoption作为ID。 plnkr.co/edit/XLuXmAmh4F9OobyJhBCW?p=preview但是每当我想显示所选的选项名称时，我都会调用一个函数来显示它。但我不喜欢这种方法。 –

角使用严格比较（===），以评估是否给定的选项是被选择。它只会在selectedItem的值为与相同的情况下作为选项的值。而在JavaScript中，如果你创建相同结构的两个物体，尽量严格比较的话，他们是不一样的，即：

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

在你保持参照原始对象第二个例子insted的，所以它会这样做：

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

来源

2015-06-27 23:51:05

因此，每当我想要选择的选项名称，那么我是否有调用函数来过滤和显示？就像我在这里http://plnkr.co/edit/XLuXmAmh4F9OobyJhBCW?p=preview –

选择的选项没有显示Angularjs下拉列表

回答

相关问题