欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJS實現(xiàn)全選反選功能

 更新時間：2015年12月08日 10:03:41   作者：super_walker  
這篇文章主要介紹了AngularJS實現(xiàn)全選反選功能，這里用到AngularJS四大特性之二----雙向數(shù)據(jù)綁定，對angularjs實現(xiàn)全選反選相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧

AngularJS是為了克服HTML在構(gòu)建應(yīng)用上的不足而設(shè)計的。HTML是一門很好的為靜態(tài)文本展示設(shè)計的聲明式語言，但要構(gòu)建WEB應(yīng)用的話它就顯得乏力了。所以我做了一些工作（你也可以覺得是小花招）來讓瀏覽器做我想要的事。

這里用到AngularJS四大特性之二----雙向數(shù)據(jù)綁定

注意：沒寫一行DOM代碼！這就是ng的優(yōu)點，bootstrap.css為了布局，JS代碼也只是簡單創(chuàng)建ng模塊和ng控制器

效果：

<!DOCTYPE html>
<html lang="en" ng-app="myModule5"><!--3、ng-app="myModule5"啟動ng并調(diào)用模塊-->
<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、創(chuàng)建自定義模塊和控制器
angular.module('myModule5', ['ng']).
controller('myCtrl5', function($scope){
});
</script>
</body>
</html>

ps：AngularJs 簡單實現(xiàn)全選，多選操作

很多時候我們在處理CURD（增刪改查）的時候需要實現(xiàn)批量操作數(shù)據(jù)，這時候就必須使用多選操作。

Angular 中實現(xiàn)如下（當(dāng)然還有很多種比筆者寫的更好的方法，這里只是簡單的實現(xiàn)。）

HTML：

<section>
<pre>{{choseArr}}</pre>
全選: <input type="checkbox" ng-model="master" ng-click="all(master,tesarry)">
<div ng-repeat="z in tesarry">
<input id={{z}} type="checkbox" ng-model="x" ng-checked="master" ng-click="chk(z,x)">{{z}}
</div>
<a href="#" class="btn btn-danger" ng-click="delete()" > 刪除</a>
</section>

頁面效果如下：（CSS采用bootstrap）　

JS代碼：

$scope.tesarry=[‘1‘,‘2‘,‘3‘,‘4‘,‘5‘];//初始化數(shù)據(jù)
$scope.choseArr=[];//定義數(shù)組用于存放前端顯示
var str="";//
var flag=‘‘;//是否點擊了全選，是為a
$scope.x=false;//默認(rèn)未選中
$scope.all= function (c,v) {//全選
if(c==true){
$scope.x=true;
$scope.choseArr=v;
}else{
$scope.x=false;
$scope.choseArr=[""];
}
flag=‘a(chǎn)‘;
};
$scope.chk= function (z,x) {//單選或者多選
if(flag==‘a(chǎn)‘) {//在全選的基礎(chǔ)上操作
str = $scope.choseArr.join(‘,‘) + ‘,‘;
}
if (x == true) {//選中
str = str + z + ‘,‘;
} else {
str = str.replace(z + ‘,‘, ‘‘);//取消選中
}
$scope.choseArr=(str.substr(0,str.length-1)).split(‘,‘);
};
$scope.delete= function () {// 操作CURD
if($scope.choseArr[0]==""||$scope.choseArr.length==0){//沒有選擇一個的時候提示
alert("請至少選中一條數(shù)據(jù)在操作！")
return;
};
for(var i=0;i<$scope.choseArr.length;i++){
//alert($scope.choseArr[i]);
console.log($scope.choseArr[i]);//遍歷選中的id
}
};

相關(guān)文章

  • AngularJs學(xué)習(xí)第五篇從Controller控制器談?wù)?scope作用域

    AngularJs學(xué)習(xí)第五篇從Controller控制器談?wù)?scope作用域

    這篇文章主要介紹了AngularJs(五）從Controller控制器談?wù)?scope作用域 的相關(guān)資料,需要的朋友可以參考下
    2016-06-06

    • 最新評論