1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > web前端————angular1表格中的复选框 全选 反选 分页小例子

web前端————angular1表格中的复选框 全选 反选 分页小例子

时间:2022-07-10 09:13:38

相关推荐

web前端————angular1表格中的复选框 全选 反选 分页小例子

html页面代码:

<table class="table ordertable label-table"><thead><tr><th style="width:10%;"><input type="checkbox" ng-checked="selectAllButton()" ng-click="clickSelectAll($event)">全选</th><th>姓名</th><th>年龄</th></tr></thead><tbody><tr ng-repeat="(index,item) in list"><td><input type="checkbox" ng-checked="itemChecked(item)" ng-click="itemCheckedClick(item)"></td><td><p>{{item.name}}</p></td><td><p>{{item.id}}</p></td></tr></tbody></table>

JS代码:

var app = angular.module('app',[])app.controller('myController',function($scope) {$scope.list = []$scope.testData = [//模拟后台数据{ id:1,name:"小一"},{ id:2,name:"小二"},{ id:3,name:"小三"},{ id:4,name:"小四"},{ id:5,name:"小五"},{ id:6,name:"小六"},{ id:7,name:"小七"},{ id:8,name:"小八"},{ id:9,name:"小九"},{ id:10,name:"小十"},{id:11,name:"小十一"},{ id:12,name:"小十二"},{ id:13,name:"小十三"},{ id:14,name:"小十四"},{ id:15,name:"小十五"},{ id:16,name:"小十六"},{ id:17,name:"小十七"},{ id:18,name:"小十八"},{ id:19,name:"小十九"},{ id:20,name:"小二十"},]$scope.page = 0//页面编码$scope.selectArrray = [] //定义第三方变量,存储选中的数据/*** 获取后台数据* 实际项目中方法里写的是ajax*/$scope.getData = function(page){var num = 0num = page === 0 ? 1 : page+1//$scope.testData.slice(page*5,num*5) 相当于从后台获取的数据,这里每页取五条$scope.list = $scope.testData.slice(page*5,num*5)}$scope.getData($scope.page)/*** 全选按钮点击*/$scope.clickSelectAll = function($event) {var checked = $event.targetif(checked.checked) {$scope.list.forEach(item=>{if($scope.selectArrray.indexOf(item) === -1) {$scope.selectArrray.push(item)}})}else {$scope.list.forEach(item=>{$scope.selectArrray.splice($scope.selectArrray.indexOf(item),1)})}}/*** 全选按钮状态*/$scope.selectAllButton = function() {var isAll = true$scope.list.forEach(item=>{if($scope.selectArrray.indexOf(item) === -1) {isAll = false}})return isAll}/*** 单选按钮点击*/$scope.itemCheckedClick = function(item) {if($scope.selectArrray.indexOf(item) === -1) {$scope.selectArrray.push(item)}else {$scope.selectArrray.splice($scope.selectArrray.indexOf(item),1)}}/*** 单选按钮选中状态*/$scope.itemChecked = function(item) {return $scope.selectArrray.indexOf(item) !== -1}$scope.next = function() { //模拟下一页$scope.page = $scope.page+1$scope.getData($scope.page)}$scope.prod = function() { //模拟上一页$scope.page = $scope.page-1$scope.getData($scope.page)}/*** 确定按钮*/$scope.isOk = function() {console.log($scope.selectArrray)}})

页面效果:

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