将 Angular Material Design 复选框绑定到控制器中的数组

Posted 2023-02-22

【中文标题】将 Angular Material Design 复选框绑定到控制器中的数组

【英文标题】：Binding Angular Material Design Checkboxes to an Array in Controller

【发布时间】：2015-06-09 19:28:35

【问题描述】：

我有一组材料设计复选框，我想将它们的值绑定到我的控制器中的一个数组。

为此，我使用了this SO answer 中描述的第一种方法。虽然从列表中正确添加和删除了值，但当我单击它们时，这些框不再显示为“选中”。我的代码在下面，我还在this codepen 中重新创建了问题。

我的复选框的 HTML

<md-checkbox 
    ng-repeat="site in websites" 
    value="site" 
    ng-checked="selection.indexOf(site) > -1" 
    ng-click="toggleSelection(site)"> 
    site
</md-checkbox>

来自控制器的 JavaScript

  $scope.websites = ['Facebook', 'Twitter', 'Amazon'];
  $scope.selection = ['Facebook'];
  $scope.toggleSelection = function toggleSelection(site) 
    var idx = $scope.selection.indexOf(site);

    // is currently selected
    if (idx > -1) 
      $scope.selection.splice(idx, 1);
    

    // is newly selected
    else 
      $scope.selection.push(site);
    
  ;
);

【问题讨论】：

从 Angular Material 的 v 0.9 版本开始，看起来上面的代码现在可以正常工作，而 @jarz 代码适用于 v0.8 及以下版本

【参考方案1】：

尝试改变这个：

ng-checked="selection.indexOf(site) > -1" 

到这里：

ng-checked="selection.indexOf(site) > -1" 

为我工作：http://codepen.io/anon/pen/xbNOmE

【讨论】：

只是@jarz 答案的更新，因为他的示例不再适用：codepen.io/bora-89/pen/GNXvWJ