前端之家收集整理的这篇文章主要介绍了
angular单选全选,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<div ng-controller="myController">
<label for="flag">全选
<input id="flag" type="checkBox" ng-model="select_all" ng-change="selectAll()">
</label>
<ul>
<li ng-repeat="i in list">
<input type="checkBox" ng-model="i.checked" ng-change="selectOne()">
<span>{{id}}</span>
</li>
</ul>
</div>
var app = angular.module('myApp',[]);
app.controller('myController',['$scope',function ($scope) {
$scope.list = [
{'id': 101},{'id': 102},{'id': 103},{'id': 104},{'id': 105},{'id': 106},{'id': 107}
];
$scope.m = [];
$scope.checked = [];
$scope.selectAll = function () {
if($scope.select_all) {
$scope.checked = [];
angular.forEach($scope.list,function (i) {
i.checked = true;
$scope.checked.push(i.id);
})
}else {
angular.forEach($scope.list,function (i) {
i.checked = false;
$scope.checked = [];
})
}
console.log($scope.checked);
};
$scope.selectOne = function () {
angular.forEach($scope.list,function (i) {
var index = $scope.checked.indexOf(i.id);
if(i.checked && index === -1) {
$scope.checked.push(i.id);
} else if (!i.checked && index !== -1){
$scope.checked.splice(index,1);
};
})
if ($scope.list.length === $scope.checked.length) {
$scope.select_all = true;
} else {
$scope.select_all = false;
}
console.log($scope.checked);
}
}]);
原文链接:https://www.f2er.com/angularjs/147585.html