问题

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];
});

和facility是从服务器检索设施信息的提供者服务：

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

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

Answer 1

问题

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

我在$scope.selectedFacility上设置了一个手表，以查看模型实际更新的时间。

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

手表在开始时被召唤一次：

[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原型继承有效，以及implications of that与双向绑定＆amp; Angular在涉及子范围时进行脏检查的能力（在此处，感谢ng-options）。 This YouTube video解释得很清楚。

修复

如果你改为facilities一个对象，其成员是Resource和所选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属性，但我认为上述结构更清洁）。

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

1 个答案:

问题

修复