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

这里的其他答案确实使得所有复选框都被选中了＃34;但我认为这个想法是让底层模型也发生变化，这些答案无法做到。

这是因为当ng-checked发生变化时，Angular不会更改模型。相反，选择所有＆＃34;的正确方法;是改变模型 - 而视图就是如此。

<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>

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

$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＆＃34;驱动器＆＃34; View（除了ng-model之外的双向指令，允许View更改ViewModel，通常基于用户交互），所以每当你想要改变某些东西时，首先要问自己＆＃ 34;我希望ViewModel看起来像＃34;而不是View应该如何看待。视图将遵循ViewModel。

Answer 2

你可以使用＆＃34; for in loop＆＃34;实现这个目标

HTML code：

 <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 3

呃， if 代码是不是错了？如果你这样写，它什么都不做。请尝试以下。

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

Answer 4

最好使用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 5

通过squiroid使用demo，你也可以这样做：演示：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 6

你可以切换复选框并获得这样的值。通过使用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"}
    ];

});

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

6 个答案: