将角度材质设计复选框绑定到控制器中的数组

Binding Angular Material Design Checkboxes to an Array in Controller

本文关键字:绑定 控制器 数组 复选框      更新时间:2023-09-26

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

为了实现这一点,我使用了SO答案中描述的第一种方法。当这些值被正确地添加到列表中或从列表中删除时,当我单击它们时,这些框将不再显示为"已选中"。我的代码在下面,我也在这个代码笔中重新创建了这个问题。

我的复选框的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);
    }
  };
});

尝试更改此项:

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

到此:

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

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