angular2 全选

方法如下:

需要用到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>

<p 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>

</p>

<script src="js/angular.js"></script><!--1、引入angularJS-->

<script>

//2、创建自定义模块和控制器

angular.module(myModule5, [ng]).

controller(myCtrl5, function($scope){

});

</script>

</body>

</html>

   

ps:AngularJs 简单实现全选,多选操作。

<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>
<p ng-app="myApp">
<p 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>
</p>
</p>
</body>
</html>$scope.fx=function(){
var cbs= $("[class=cb]");
for (var i=0;i<$scope.yao.length;i++) {
var cb=cbs[i];
cb.checked=!cb.checked;
}
}//全选
$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);
});
}
喜欢阅读
  • 女总裁全能高手

    女总裁全能高手

    他是全能奇才,他有众多传奇身份,十年戎马过眼云烟,回归都市,化身女总裁全职保镖……

  • 此心因你多绝情

    此心因你多绝情

    她以要杀了他的目的接近他,却输得万劫不复……

  • 情深入骨:总裁的心尖宠妻

    情深入骨:总裁的心尖宠妻

    遭人冷落的千金小姐赫连娇,被父亲和继母骗回国,以换取资金的注入。但她早就知道他们阴谋,并将计就计把他们的宝贝女儿,送给了老男人,而自己呢,却阴错阳差得遇见了自己的男神。醒来时男人温柔得说,“终于等到你了!”女人笑,“我说了,我是你的解药……”

  • 仙魂狂少

    仙魂狂少

    仙人重生,将世间所有生物玩弄于股掌之中。不服者,死。诚服者,生。无有例外……

  • 寒窗细柳梦缠绵

    寒窗细柳梦缠绵

    五年前,她为他低声下气,忍气吞声的做着傅家太太。“叶素,我告诉你,我永远都不可能承认你。”“叶素,你就是这一切灾难的罪魁祸首!”“叶素,打掉这个孩子。”五年后,她华丽归来,面对的却依然是他。往事回首,她又该如何是从。“五年了,傅少卿,你只不过是我的一场梦而已。”新人小作者,小生公子寅,跪求各位小主赏脸~感谢~

  • 隐龙为婿

    隐龙为婿

    昔日战神,今日赘婿。只为牵着你的手,给你整个世界!

  • 赠你万千宠爱

    赠你万千宠爱

    请问。你见过有人用一千六百万的豪车去撞学校的大门吗?你见过有人在见面第一次就告白,第二次见面就求婚的吗?你见过有人强行带着你去奢侈品区疯狂扫货的吗?你有见过,相处半个月不到,就以一个没有漏洞的理由带你回家见家长的吗?苏沐沐都见过!并且这个看似神经病的人!是电竞圈的一神!拿过无数国际大奖的选手!强行娶她的老公!

  • 逃宠娇妻太撩人

    逃宠娇妻太撩人

    新婚之夜,丈夫和自己的妹妹偷情,自己却被他拉去人妻俱乐部受人侮辱。季已萱仓皇而逃,撞进了他的怀抱,惨遭粗暴度对待。她发誓,牙债血偿,血债命偿,誓要脚踩渣男,手灭贱女。可唯独对他,晚上满是相思,白天佯装冷漠:“先生,我们不熟。”他却紧揽她的纤腰:“你身上的所有我都记得,我不介意再熟悉一下。”她玉手高扬,佯装嗔怒:“不要命的就来。”“好嘞。”他坏笑不已,“只要你乖,渣男贱女,通通交给我。”而后,夜色情迷,春意迷人。

  • 猜你喜欢
    热门推荐
  • bastion字体下载
  • 防火透明塑料有哪些
  • 雅马哈kb130怎么样
  • running man结婚
  • 建筑环境景观
  • nt大于2.5是不是不能要
  • 小淋浴房尺寸
  • 国际法委员会
  • pscs6gif透明
  • subcallosal gyri
  • windows卸载服务
  • danse lente在哪买
  • scp2711
  • l43e5800a ud
  • g2812次列车时刻表
  • 告别小学作文600字
  • 彻底删除photoshop
  • 185传奇下载
  • 上官肖小
  • 通信地球站
  • All Right Reserved 爱说篇