是否可以在选中三个 ng-repeated 复选框后禁用所有复选框？

Question

例如

 <input type="checkbox" ng-repeat="color in colors" 
                        ng-class="checked <= 3 ? '' : 'disabled'"/>

当我 select 最多三个复选框时，我想禁用其余复选框。 angular 这样做的方法是什么？我可以保留所有东西 "inline" 还是必须求助于 filters/models？

Answer 1

实现此目的的一种方法是将 ng-model 分配给您的复选框，
并在控制器上具有确定点击了多少个按钮以及是否禁用其余按钮的功能：

app.controller('MainCtrl', function($scope) {
  $scope.colors = ['red', 'blue', 'purple', 'yellow'];
  $scope.selected = [];
  $scope.check = function(color) {
    var pos = $scope.selected.indexOf(color);
    if (pos > -1) {
      $scope.selected.splice(pos,1);
    } else {
      $scope.selected.push(color);
    }
  } 

  $scope.disable = function(color) {
    return $scope.selected.length >= 3 && $scope.selected.indexOf(color) == -1;
  }
});

html:

<body ng-app ng-controller="MainCtrl">
  <input type="checkbox" ng-repeat="color in colors" ng-model="test" ng-change="check(color)" ng-disabled="disable(color)">
</body>

和一个plnkr

Answer 2

我会将一些函数绑定到范围，因为您正在做的事情相当复杂（取决于数据的结构。

看看这个：

http://plnkr.co/edit/cfNGnx5eNXTuirCduWaG?p=preview

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.data = [
    {id: 'a', checked: false},
    {id: 'b', checked: false},
    {id: 'c', checked: true},
    {id: 'd', checked: true},
    {id: 'e', checked: false}
  ];
  $scope.selected = function() {
    var i, selectedCount = 0;
    for (i = 0; i < $scope.data.length; i++) {
      if ($scope.data[i].checked) {
        selectedCount += 1;
      }
    }
    return selectedCount;
  };
});

和模板：

<body ng-app="plunker" ng-controller="MainCtrl">
  <p>{{data | json}}</p>
  <p>Greater than 3? <span ng-bind="selected()"></span>
  </p>
  <label ng-repeat="elem in data">{{elem.id}}
    <input ng-disabled="selected() > 2 && !elem.checked" ng-model="elem.checked" type="checkbox" ng-checked="elem.checked">
  </label>
</body>

Answer 3

我想这就是您要找的：

var app = angular.module('app', []);
app.directive('checkboxes', function() {
  return {
    restrict: 'A',
    scope: {
      colors: '=checkboxes'
    },
    template: '<div ng-repeat="color in colors"><input type="checkbox" ng-disabled="count()>=3 && !color.checked" ng-model="color.checked" /> <span ng-class="{disabled:count()>=3 && !color.checked}">{{color.name}}</span></div>',
    controller: function($scope, $element) {
      function countChecked(arr, fn) {
        var checkCount = 0;
        for (var i = 0; i < arr.length; ++i) {
          if (fn(arr[i]) === true) {
            ++checkCount;
          }
        }

        return checkCount;
      }
      $scope.count = function() {
        return countChecked($scope.colors, function(color) {
          return color.checked;
        });
      }

    }
  }
});
app.controller('ctrl', function($scope) {

  $scope.colors = [{
    name: 'red'
  }, {
    name: 'green'
  }, {
    name: 'blue'
  }, {
    name: 'orange'
  }, {
    name: 'black'
  }];

});

.disabled {
  color: grey;
  font-style: italic;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app" ng-controller="ctrl">
  <div checkboxes="colors">

  </div>
  Colors: {{colors}}
  <br />

</body>

是否可以在选中三个 ng-repeated 复选框后禁用所有复选框？

Is it possible to disable all checkboxes after three ng-repeated checkboxes have been checked?

checkbox

angularjs