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

我想 select 单击 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

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

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

Answer 2

最好用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 3

使用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 4

这里的其他答案确实选中了所有复选框 "selected"，但我认为这个想法是让基础模型也发生变化，而这些答案却没有做到这一点。

这是因为 Angular 不会在 ng-checked 更改时更改模型。相反，"select all" 的正确方法是更改模型 - 视图紧随其后。

<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 "drives" View（双向指令除外，例如 ng-model，它允许 View 更改 ViewModel，通常基于用户交互），因此无论何时您想改变一些东西，首先问自己 "how would I want the ViewModel to look like"，而不是 View 应该是什么样子。 View 将遵循 ViewModel。

Answer 5

您可以使用 "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 6

您可以切换复选框并获取值，如 this.By 使用 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"}
    ];

});

select ng-repeat 中的所有复选框

select all checkboxes inside ng-repeat

javascript

checkbox

angularjs