如何在范围值更改时更新 md-select 选项？

Question

我有一个非常基本的 md-select 元素，只有 3 个选项。我允许用户通过 multiple 属性 select 多个选项。

我有一个按钮可以删除第二个值，前提是它是 selected。尽管更改未应用于 md-select 元素?

，但该值已从范围变量中正确删除

Javascript:

$scope.selectedNumbers = [];

$scope.numbers = [{
   num: 1
}, {
   num: 2
}, {
   num: 3
}];

$scope.deselectTwo = function() {        
  if ($scope.selectedNumbers.indexOf(2) > -1) {          
     $scope.selectedNumbers.splice(1, 1);
  }
};

HTML:

<md-input-container>
  <label>Numbers</label>
  <md-select ng-model="selectedNumbers" multiple>
    <md-option ng-repeat="number in numbers" ng-value="{{number.num}}">
      {{number.num}}
    </md-option>
  </md-select>
</md-input-container>

<md-button class="md-raised md-primary" ng-click="deselectTwo()">
  Deselect 2
</md-button>

<div>
  Ng-repeat for '$scope.selectedNumbers':
  <span ng-repeat="number in selectedNumbers">
    {{number}}
  </span>
</div>

WORKING EXAMPLE

要重现该问题，select 从下拉列表中选择“1”和“2”。然后单击 "Deselect 2" 按钮以查看它已从 ng-repeat 中删除，但未从下拉列表中的 selected 选项中删除。

如何在范围变量更改时更新我的 md-select 选项？

Answer 1

奇怪 - 这可能是 md-select 的错误吗？我注意到，如果您将 splice() 替换为赋值（例如 $scope.selectedNumbers = [1]），那么它会按预期工作。

作为一种丑陋的解决方法，您可以添加一行以将 selectedNumbers 设置为其自身的副本，这会导致 md-select 更新。例如：$scope.selectedNumbers = $scope.selectedNumbers.slice();

很想听听其他人是否有更好的答案！

如何在范围值更改时更新 md-select 选项？

How to update md-select options when scope value changes?

javascript

angularjs

angular-material