角指令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，但我認爲上述結構更清潔）。