角指令NG选项最终选择多个项目

Question

在AngularJS页我有一个下拉菜单，列出的建筑（设施）：

<select ng-model="selectedFacility" 
    ng-options="facility.abbr for facility in facilities track by facility.id"> 
</select> 
<label>{{selectedFacility.name}}</label> 

似乎是工作。下拉列表中的值显示用户选择的内容（缩写），标签中的文本显示相应的长名称。好。

但是，在其他地方，我通过$scope.selectedFacility.id到$http调用，并且我注意到它始终是1，无论实际选择哪个建筑物。我看着（在Chrome F12）深，我发现我在某些时候选择所有收存箱项具有selected="selected"属性：

<option value="1" label="Engineering" selected="selected">Engineering</option> 
<option value="2" label="Biology" selected="selected">Biology</option>  
<option value="3" label="CompSci">CompSci</option>  
<option value="4" label="Admissions" selected="selected">Admissions</option>  
<option value="5" label="Security">Security</option> 

如从上面的输出明确，我所选择的项目1，2，和在某个点处的4个。我的猜测是，由于第一个项目最初被选中，它总是具有“选定”属性，因此selectedFacility.id=1。但是，如何告诉Angular删除选定的属性？这是一个常规的下拉菜单，没有任何方式选择多个项目 - 但多个项目被标记为选中

更新。看起来这是很重要的控制器有以下几点：

$scope.selectedFacility= {}; 
$scope.facilities = facility.getFacilities().query(function(facilities) { 
    $scope.selectedFacility=facilities[0]; 
}); 

和设备是从服务器检索设施信息提供服务：

service.getFacilities = function() { 
    return $resource(url); 
    }; 

如果我开始使用NG-和$scope.selectedFacility.imeanit=facilities[0];selectedFacility.imeanit模型，它按预期工作

Answer 1

问题

我能够重新创建您的问题here。

我在$scope.selectedFacility上设置了一个手表，以查看模型实际更新的时间。改变所选择的选项，即使

[Log] Resource (main.js, line 17) 
    abbr: "Eng" 
    id: 1 
    name: "Engineering" 
    __proto__: Resource 
[Log] null (main.js, line 18) 

但后来再也没有，：

[Log] null (main.js, line 17) 
[Log] null (main.js, line 18) 

然后再一次的query()回调中：

$scope.$watch('selectedFacility', function(newVal, oldVal) { 
    console.log(newVal); 
    console.log(oldVal); 
}); 

手表被在开始调用一次<select>。

之所以有多么JS原型继承工作要做，而implications of that与2路绑定&角的做子女范围涉及当脏检查（这在这里，感谢ng-options）的能力。 This YouTube video解释得很好。

的修复

如果你反而让facilities一个对象，其成员是Resource S和选择Resource列表，然后它会工作。这里的展示工作示例（下面的相关细节）another plunker：

JS：

$scope.facilities = { 
    selected: null, 
    all: [] 
}; 

$scope.facilities.all = Facilities.query(function(list) { 
    $scope.facilities.selected = list[0]; 
}); 

HTML：

<select ng-if="facilities.all.length" 
     ng-model="facilities.selected" 
     ng-options="facility.abbr for facility in facilities.all track by facility.id"> 
</select> 
<label ng-if="facilities.selected">{{facilities.selected.name}}</label> 

（严格地说，只有ng-model（即facilities.selected）需求成为一个财产属性的 - $scope，但我认为上述结构更清洁）。