html - angular ng-options 指令最终选择了多个项目

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 中)，我看到我在某个时候选择的 all 保管箱项目具有 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。我的猜测是，由于最初选择了第一个项目，它最终总是具有“selected”属性，因此 selectedFacility.id=1。但是我如何告诉 Angular 删除选定的属性呢？这是一个常规的下拉菜单，无法选择多个项目 - 但多个项目被标记为选中

更新。看起来 Controller 具有以下内容很重要:

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

设施是从服务器检索设施信息的提供者服务:

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

如果我开始在 ng-model 中使用 $scope.selectedFacility.imeanit=facilities[0]; 和 selectedFacility.imeanit，它会按预期工作

Answer 1

问题

我能够重现您的问题 here .

我在 $scope.selectedFacility 上设置了 watch , 以查看模型何时实际更新。

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

watch 在开始时被调用一次:

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

然后再次进入 query()回调:

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

但以后再也不会了，即使在 <select> 中更改了选定的选项也是如此.

原因与 JS 原型(prototype)继承的工作方式有关，以及 implications of that具有双向绑定(bind)和 Angular 在涉及子作用域时进行脏检查的能力(感谢 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 的属性中的属性，但我认为上面的结构更简洁)。