选中/取消选中所有复选框 - AngularJS ng-repeat [英] Check/ Uncheck All checkboxes - AngularJS ng-repeat

问题描述

我有一个看起来像这样的结构:http://jsfiddle.net/deeptechtons/TKVH6/

<ul ng-controller="checkboxController"><li>检查所有<input type="checkbox" ng-model="selectedAll" ng-click="checkAll()"/><li ng-repeat="项目中的项目"><标签>{{item.Name}}<input type="checkbox" ng-model="item.Selected"/>
angular.module("CheckAllModule", []).controller("checkboxController", function checkboxController($scope) {$scope.Items = [{名称:《物品一》}, {名称:项目二"}, {名称:《物品三》}];$scope.checkAll = 函数 () {如果($scope.selectedAll){$scope.selectedAll = true;} 别的 {$scope.selectedAll = false;}angular.forEach($scope.Items, function (item) {item.Selected = $scope.selectedAll;});};});

选中或取消选中全部选中时，将选中所有其他复选框.但选择检查所有"时，我取消选择其中一个项目，我希望检查所有"以取消选择.

提前致谢！

(PS:感谢 deeptechtons 提供 JSFiddle)

解决方案

如果你使用的是 Angular 1.3+ 你可以使用 ng-model-options 中的 getterSetter 来解决避免手动跟踪 allSelected 状态

HTML:

JS:

var getAllSelected = function () {var selectedItems = $scope.Items.filter(function (item) {返回 item.Selected;});返回 selectedItems.length === $scope.Items.length;}var setAllSelected = 函数(值){angular.forEach($scope.Items, function (item) {item.Selected = 值；});}$scope.allSelected = 函数(值){如果(值！== 未定义){返回 setAllSelected(value);} 别的 {返回 getAllSelected();}}

http://jsfiddle.net/2jm6x4co/

I have a structure which looks like this: http://jsfiddle.net/deeptechtons/TKVH6/

<div>
<ul ng-controller="checkboxController">
    <li>Check All
        <input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />
    </li>
    <li ng-repeat="item in Items">
        <label>{{item.Name}}
            <input type="checkbox" ng-model="item.Selected" />
        </label>
    </li>
</ul>
</div>

angular.module("CheckAllModule", [])
.controller("checkboxController", function checkboxController($scope) {


$scope.Items = [{
    Name: "Item one"
}, {
    Name: "Item two"
}, {
    Name: "Item three"
}];
$scope.checkAll = function () {
    if ($scope.selectedAll) {
        $scope.selectedAll = true;
    } else {
        $scope.selectedAll = false;
    }
    angular.forEach($scope.Items, function (item) {
        item.Selected = $scope.selectedAll;
    });

};


});

When check all is selected or deselected, all other checkboxes are selected. But when "Check All" is selected, and I deselect one of the items, I want "Check All" to be deselected.

Thanks in advance!

(PS: Thanks to deeptechtons for the JSFiddle)

解决方案

If you are using Angular 1.3+ you can use getterSetter from ng-model-options to solve this and avoid manually keeping track of the allSelected state

HTML:

<input type="checkbox" ng-model="allSelected" ng-model-options="{getterSetter: true}"/>

JS:

var getAllSelected = function () {
    var selectedItems = $scope.Items.filter(function (item) {
        return item.Selected;
    });

    return selectedItems.length === $scope.Items.length;
}

var setAllSelected = function (value) {
    angular.forEach($scope.Items, function (item) {
        item.Selected = value;
    });
}

$scope.allSelected = function (value) {
    if (value !== undefined) {
        return setAllSelected(value);
    } else {
        return getAllSelected();
    }
}

http://jsfiddle.net/2jm6x4co/

这篇关于选中/取消选中所有复选框 - AngularJS ng-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！