angular怎么写出带全选反选增删单行单列的表格?并且能够有一个数组是选中的项的数据,不用jq
业精于勤,荒于嬉;行成于思,毁于随。
<!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}}
<br> <br> user.roles {{ user.roles}}<br> <br> role.id {{ids}}<br> <button class="right radius reveal-button" ng-click="del()">删除</button> </p>
</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) };
});
<!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)
};
});