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

Question

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

为此，我使用了 this SO answer. While the values are properly being added and removed from the list, the boxes no longer display as "checked" when I click on them. My code is below and I also recreated the problem in 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);
    }
  };
});

Answer 1

尝试改变这个：

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

对此：

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

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

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

Binding Angular Material Design Checkboxes to an Array in Controller

javascript

angularjs

angular-material