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

【问题标题】：How to update md-select options when scope value changes?范围值更改时如何更新 md-select 选项？
【发布时间】：2015-12-02 01:05:10
【问题描述】：

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

我有一个删除第二个值的按钮，只有当它被选中时。尽管更改未应用于 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

要复制问题，请从下拉列表中选择“1”和“2”。然后单击“取消选择 2”按钮以查看它从 ng-repeat 中删除，而不是从下拉列表中的选定选项中删除。

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

【问题讨论】：

奇怪 - 这可能是 md-select 的错误吗？我注意到，如果您将 splice() 替换为分配（例如 $scope.selectedNumbers = [1]），那么它会按预期工作。
@cmrn - 嗯，有趣的发现。我可能需要在 Angular Material github 上提交错误报告。
作为一个丑陋的解决方法，您可以添加一行将selectedNumbers 设置为自身的副本，这会导致md-select 更新。例如：$scope.selectedNumbers = $scope.selectedNumbers.slice();
@cmrn - 听起来不错，暂时会运行它，因为它解决了问题:)
太好了 - 在这种情况下，我已经将其发布为答案:)

标签： javascript angularjs angular-material

【解决方案1】：

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

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

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

【讨论】：

标记为已接受，因为它在技术上确实回答了问题。谢谢cmrn。一旦我在 Github 上收到 Angular Material 团队的回复，我将在此处发布。