700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > AngularJS 之input checkbox全选 反选简单写法

AngularJS 之input checkbox全选 反选简单写法

时间:2022-04-27 16:55:23

相关推荐

AngularJS 之input checkbox全选 反选简单写法

我们在使用jQuery或者原生JS全选反选功能使用type="checkbox"自带属性checked来完成,

当然AngularJS一样可以通过ngChecked或者ngModel配合ngChange完成需求。

正文开始:

最完整的checkbox全选/反选需求:

①点击列表头部全选按钮完成表格中所有checkbox全部选中或者全部不选

②当表格中至少有一个未选中时,表头中的checkbox状态显示未选中

③手动选中表格中所有checkbox时,表头中的checkbox状态选中

HTML:

<table><tr><td><input type="checkbox" ng-model="select_all" ng-change="selectAll()" /></td><td>姓名</td><td>性别</td><td>年龄</td><td>联系方式</td><td>...</td></tr><tr ng-repeat="user in users"><td><input type="checkbox" ng-model="user.checked" ng-change="selectOne()" /></td><td ng-bind="user.name"></td><td ng-bind="user.sex"></td><td ng-bind="user.age"></td><td ng-bind="user.telphone"></td><td>...</td></tr></table>

JS:

angular.module('myApp',[]).controller('myCtroller',['$scope',function($scope){//全选、反选$scope.selectAll = function(){$scope.checked = [];//定义空数组if($scope.select_all){angular.forEach($scope.users, function(user){user.checked = true;$scope.checked.push(user.id);})}else{angular.forEach($scope.users, function(user){user.checked = false;$scope.checked = [];//置空})}}//单选交互$scope.selectOne = function(){$scope.checked = [];//定义空数组angular.forEach($scope.users, function(user){if(user.checked === true){$scope.checked.push(user.id);}else{$scope.checked.splice(user.id, 1);}})if($scope.checked.length == $scope.users.length){$scope.select_all = true;}else{$scope.select_all = false}}}])

效果:

以上就是实现全选反选和单选交互的代码,代码较多,但是读起来逻辑清晰,加油!

更多功能实例源码下载地址:ngDemo

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。