选择 ng-repeat 中的所有复选框

Question

在 ng-repeat 中有一个复选框列表：

  <div ng-repeat="item in results">
      <label class="inlinelabel checkbox">
        <input type="checkbox" ng-model="selected[item.id]"><i></i>
      </label>
</div>

我想在单击 ng-repeat 之外的单个复选框时选中所有复选框。

   <label> Select All </label>
<input type="checkbox" data-ng-model="selectedAll" ng-click="checkAll()">

我尝试了控制器中的代码，但它不起作用。

   $scope.checkAll=()=>{
                if ($scope.selectedAll) {
                    $scope.selectedAll = true;
                } else {
                    $scope.selectedAll = false;
                }
                angular.forEach($scope.employees,function (selected) {
                    selected[selected.id] = $scope.selectedAll;
                });
            }

Answer 1

您可以切换复选框并获取这样的值。顺便使用 linq.js。

<dl ng-controller="selectCtrl">
  <dt>
    <input type="checkbox" ng-model="selectAll" ng-change="toggleSelect('all')"/> select all
  </dt>
  <dd ng-repeat="x in list">
    <input type="checkbox" ng-model="select[$index]" ng-change="toggleSelect()" ng-true-value="{{x.id}}" ng-false-value="" />{{x.name}}
  </dd>
</dl>

var app = angular.module('app', []);
app.controller('selectCtrl', function ($scope) {
  $scope.selectAll    = false;
  $scope.select       = [];
  $scope.toggleSelect = function (tag) {

    if (tag == 'all') {
      if ($scope.selectAll) {
        $scope.select = $.Enumerable.From($scope.list).Select("$.id").ToArray();
      } else {
        $scope.select = []
      }
    } else {
      var items        = $.Enumerable.From($scope.select).Where('$').ToArray();
      $scope.select    = $.Enumerable.From($scope.list).Select(function (x) {
        if (items.indexOf(x.name) > -1) {
          return x.name;
        }
        return '';
      }).ToArray();
      $scope.selectAll = !$.Enumerable.From($scope.select).Any('!$');

    }
  };
  $scope.checkSelect  = function () {
    return $.Enumerable.From($scope.select).Any('$');
  };
  $scope.list         =
    [
      {id: 1, name: "checkbox1"},
      {id: 2, name: "checkbox2"},
      {id: 3, name: "checkbox3"},
      {id: 4, name: "checkbox4"}
    ];

});

Answer 2

这里的其他答案确实使所有复选框都“被选中”，但我认为这个想法是让底层模型也发生变化，而这些答案没有做到这一点。

这是因为当ng-checked 改变时，Angular 不会改变模型。相反，“全选”的正确方法是更改​​模型 - 视图随之而来。

<button ng-click="selectAll()">select all</button>
<div ng-repeat="item in items">
  <label>
    {{item.n}}:
    <input type="checkbox" ng-model="selected[item.id]">
  </label>
</div>

在控制器中，只需将selected中的所有项目设置为true：

$scope.selected = {};
$scope.selectAll = function(){
  for (var i = 0; i < $scope.items.length; i++) {
    var item = $scope.items[i];

    $scope.selected[item.id] = true;
  }
};

plunker

ViewModel “驱动” View（除了双向指令，如 ng-model，它允许 View 更改 ViewModel，通常基于用户交互），所以无论何时您想要更改某些内容，首先问自己“我希望 ViewModel 是什么样子”，而不是 View 应该是什么样子。 View 将跟随 ViewModel。

Answer 3

您可以使用“for in loop”来实现这一点

HTML 代码：

 <button ng-click="checkAll()">check all</button>
  <div ng-repeat="item in items">
    <p>
      {{item.n}}:
      <input type="checkbox" ng-model="sel[item.id]">
    </p>
  </div>

控制器代码：

$scope.items = [
    {id: 123, name: "checkbox1"},
    {id: 234, name: "checkbox2"},
    {id: 456, name: "checkbox3"},
    {id: 567, name: "checkbox4"},
    ];

  $scope.sel = {};
  $scope.checkAll = function()
  {
    for(i in $scope.items)
      $scope.sel[$scope.items[i].id]=true;
  }

请查看plunker中的工作演示

Answer 4

使用 squiroid 的演示，你也可以这样做： 演示：http://jsfiddle.net/lotusgodkk/jh1svmr0/1/

HTML：

<div ng-controller="MyCtrl">
    <div ng-repeat="item in results">
        <label class="inlinelabel checkbox">
            <input type="checkbox" ng-model="item.id" ng-checked="toggle"><i>{{item.name}}</i>

        </label>
    </div>
    <label>Select All</label>
    <input type="checkbox" data-ng-model="selectedAll" ng-click="toggle=!toggle">
</div>

JS：

var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
    $scope.toggle = false;
    $scope.results = [{
        'id': '1',
            'name': 'rachit'
    }, {
        'id': '2',
            'name': 'rachit1'
    }, {
        'id': '3',
            'name': 'rachit2'
    }    
    ];
}

Answer 5

最好使用ng-checked

小型工作演示 :)

<div ng-controller="MyCtrl">
  <div ng-repeat="item in results">
      <label class="inlinelabel checkbox">
        <input type="checkbox" ng-model="item.id" ng-checked="checkall"><i>{{item.name}}</i>
      </label>
</div>
      <label> Select All </label>
<input type="checkbox" data-ng-model="selectedAll" ng-click="checkAll()">
</div>

function MyCtrl($scope) {
    $scope.checkall=false;
    $scope.results=[
        {'id':'1','name':'rachit'},
        {'id':'2','name':'rachit1'},
        {'id':'3','name':'rachit2'}    

    ];
$scope.checkAll=function(){
                if ($scope.selectedAll) {
                    $scope.checkall = true;
                } else {
                    $scope.checkall = false;
                }
                 }
}

这里的小演示:) Fiddle

Answer 6

呃，if 代码有问题吗？如果你这样写，它什么也做不了。试试下面。

if (!$scope.selectedAll) {
    $scope.selectedAll = true;
} else {
    $scope.selectedAll = false; 
}