溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了怎么用angular實現多選按鈕的全選與反選，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
下面用angular來實現這一功能
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
</head>
<body ng-app="select" ng-controller="moreSel">
全選: <input type="checkbox" ng-checked="checks" ng-click="checks = !checks; all(checks)">
<!--track by $index去掉也可以-->
<div ng-repeat="item in datas track by $index">
<input type="checkbox" ng-checked="chkItem[$index]" ng-click="ck(chkItem[$index]==undefind?false:chkItem[$index], item, $index)">{{ item }}
</div>
<pre>{{arr}}</pre>
</body>
<script>
//創建模塊
angular.module("select", [])
//控制器
.controller("moreSel", function ($scope) {
$scope.datas = ["C++","Html","Javascript"];
$scope.arr = [];//用來顯示選中的內容
//用來標志每一項的狀態
$scope.chkItem = [];
//全選
$scope.all = function (checks) {
//初始化設置狀態
init(checks);
//將選中的內容賦值到數組中
if(checks) {
for(var i = 0; i < $scope.datas.length; i++) {
$scope.arr[i] = $scope.datas[i];
}
}else {
$scope.arr = [];
}
}
//點擊選擇
$scope.ck = function (state, item, index) {
//取狀態的相反值
$scope.chkItem[index] = !state;
//有一個為false則全選按鈕為不選中
if(!$scope.chkItem[index]){
$scope.checks = false;
//取消選中，將數值從arr數組中刪除掉
var num = $scope.arr.indexOf(item);
$scope.arr.splice(num, 1);
}else {
//選中追加進去
$scope.arr.push(item);
for(var i = 0; i < $scope.datas.length; i++) {
//只要有一個按鈕沒有選中
if(!$scope.chkItem[i]){
return;
}
}
//全部選中
$scope.checks = true;
}
}
//初始化
var init = function (sel) {
for(var i = 0; i < $scope.datas.length; i++) {
//sel沒有值 默認初始化false
$scope.chkItem[i] = sel || false;
}
}
});
</script>
</html>感謝你能夠認真閱讀完這篇文章，希望小編分享的“怎么用angular實現多選按鈕的全選與反選”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
