angularjs 全选反选
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularjs 全选反选相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.js"></script>
<script src="checklist.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="Ctrl">
<input type="checkbox" ng-checked="user.roles.length == roles.length" ng-click="checkAll()" >全选/反选<br>
<label ng-repeat="role in roles">
<input type="checkbox" checklist-model="user.roles" checklist-value="role" > role.text<br>
</label>
<br>
<br>
<br> user.roles user.roles<br>
<br> role.id ids<br>
<button class="right radius reveal-button" ng-click="del()">删除</button>
</div>
</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)
;
);
方法如下：
需要用到AngularJS特性：双向数据绑定
注意：没写一行DOM代码！这就是ng的优点，bootstrap.css为了布局，JS代码也只是简单创建ng模块和ng控制器。
效果：
代码如下：
<!DOCTYPE html>
<html lang="en" ng-app="myModule5"><!--3、ng-app="myModule5"启动ng并调用模块-->
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.css">
<title>全选/取消全选</title>
</head>
<body>
<div class="container" ng-controller="myCtrl5"><!--4、ng-controller="myCtrl5"启用控制器-->
<h2>全选和取消全选</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>选择</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input ng-checked="selectAll" type="checkbox">
</td>
<td>Tom</td>
<td>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>
<input ng-checked="selectAll" type="checkbox">
</td>
<td>Mary</td>
<td>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>
<input ng-checked="selectAll" type="checkbox">
</td>
<td>King</td>
<td>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
</tbody>
</table>
<input type="checkbox" ng-model="selectAll">
<span ng-hide="selectAll">全选</span>
<span ng-show="selectAll">取消全选</span>
</div>
<script src="js/angular.js"></script><!--1、引入angularJS-->
<script>
//2、创建自定义模块和控制器
angular.module('myModule5', ['ng']).
controller('myCtrl5', function($scope)
);
</script>
</body>
</html>
ps：AngularJs 简单实现全选，多选操作。
参考技术A
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="angular.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("testCtrl", function($scope)
$scope.items = [id: 1, text: 'guest',id: 2, text: 'user',id: 3, text: 'customer',id: 4, text: 'admin'];
$scope.hasChecked = [];
$scope.check = function()
if($scope.hasChecked.length==$scope.items.length)
var tmp = $scope.hasChecked.join('');
if(!tmp.indexOf('true')&&!tmp.lastIndexOf('true')&&!tmp.replace(/true/g,'')&&$scope.isChecked)return;
else
if($scope.isChecked)
checkAll();
else
$scope.hasChecked = [];
else
checkAll();
var checkAll = function()
$scope.hasChecked = [];
for(var i in $scope.items)
$scope.hasChecked.push(true);
);
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="testCtrl">
<input type="checkbox" ng-model="isChecked" ng-click="check()" /> Check all
<p ng-repeat="item in items">
<input type="checkbox" ng-model="hasChecked[$index]" />
item.text </p>
</div>
</div>
</body>
</html>
参考技术B
$scope.fx=function()
var cbs= $("[class=cb]");
for (var i=0;i<$scope.yao.length;i++)
var cb=cbs[i];
cb.checked=!cb.checked;
参考技术C
//全选
$scope.qx=function()
var cbs=$("input:checkbox");
cbs.each(function()
$(this).prop("checked",true);
)
//全不选
$scope.qbx=function()
var cbs=$("input:checkbox");
cbs.each(function()
$(this).prop("checked",false);
);
JS 全选反选
<script type="text/javascript">
function TiJiao() {
if ($("#Texx_Name").val() == "") {
alert(‘请输入学校名称‘);
$("#Texx_Name").focus();
return false;
}
if ($("#Texx_DiQuDaiMa").val() == "") {
alert(‘请选择负责管辖本报名点的市州县‘);
$("#Texx_DiQuDaiMa").focus();
return false;
}
if ($("#Texx_KaoDianDaiMa").val() == "") {
alert(‘请输入学校编号‘);
$("#Texx_KaoDianTongXunDiZhi").focus();
return false;
}
$("#Button").hide();
$("#Tips").show();
}
//全选
function quanxuan(a) {
var cbl = document.getElementById(a);
var input = cbl.getElementsByTagName("input");
for (var i = 0; i < input.length; i++) {
if (input[i].checked == false) {
input[i].checked = true;
}
}
}
//反选
function fanxuan(a) {
var cbl = document.getElementById(a);
var input = cbl.getElementsByTagName("input");
for (var i = 0; i < input.length; i++) {
if (input[i].checked == false) {
input[i].checked = true;
}
else if(input[i].checked == true){
input[i].checked = false;
}
}
}
</script>
以上是关于angularjs 全选反选的主要内容，如果未能解决你的问题，请参考以下文章
jquery全选反选全不选代码
Vue实现单选、全选和反选
Layui table中筛选列增加 [全选，反选] 功能【转】
全选全不选反选
jquery全选全不选反选
全选全不选反选