angular.js - How to write a table with select all, inverse selection, add or delete single row and single column in angular?
迷茫2017-05-15 16:50:17
0
1
609
How to write a table in angular with select all, inverse selection, add, delete, single row and single column? And there can be an array containing the data of the selected item without using jq
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html lang="en" >
<head>
<title>Document</title>
<script src="angular.js"></script>
<script src="checklist.js"></script>
<script src="app.js"></script>
</head>
<body>
<input type="checkbox" ng-checked="user.roles.length == roles.length" ng-click="checkAll()" >全选/反选
<input type="checkbox" checklist-model="user.roles" checklist-value="role" > {{role.text}}
</body>
</html>
var app = angular.module("app", ["checklist-model"]);
app.controller('Ctrl', function($scope) {
$scope.roles = [
{id: 1, text: 'guest'},
{id: 2, text: 'user'},
{id: 3, text: 'customer'},
{id: 4, text: 'admin'}
];
$scope.ids = [];
//选择的结果集合
$scope.user = {
roles: []
};
$scope.checkAll = function() {
console.log($scope.user.roles.length == $scope.roles.length)
if($scope.user.roles.length == $scope.roles.length){
$scope.user.roles = [];
$scope.ids = [];
}else{
$scope.user.roles = angular.copy($scope.roles);
$scope.ids = [];
}
};
$scope.del =function(){
for(x in $scope.user.roles){
$scope.ids.push($scope.user.roles[x].id);
}
console.log($scope.ids)
};
});