最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Binding Angular Material Design Checkboxes to an Array in Controller - Stack Overflow

programmeradmin1浏览0评论

I have a group of material design checkboxes and I would like to bind their values to an array in my controller.

To acplish this I used the first method described in 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 for my checkbox

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

JavaScript from Controller

  $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);
    }
  };
});

I have a group of material design checkboxes and I would like to bind their values to an array in my controller.

To acplish this I used the first method described in 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 for my checkbox

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

JavaScript from Controller

  $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);
    }
  };
});
Share edited May 23, 2017 at 10:28 CommunityBot 11 silver badge asked Apr 5, 2015 at 2:57 dsal1951dsal1951 1,7603 gold badges18 silver badges21 bronze badges 1
  • Since the v 0.9 release of Angular Material it looks like the code above now works, while @jarz code works for v0.8 and below – dsal1951 Commented May 22, 2015 at 16:42
Add a ment  | 

1 Answer 1

Reset to default 4

Try changing this:

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

to this:

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

Worked for me: http://codepen.io/anon/pen/xbNOmE

发布评论

评论列表(0)

  1. 暂无评论