html:

<div class="input-group">
  <span class="input-group-addon" style="background-color: #fff;border:none">状态</span>
  <div ng-model="queryParam.status" class="ui-checkbox ui-checkbox-primary" style="margin-top: 4px;margin-bottom: 0;">
    <label class="ui-checkbox-inline">
      <input type="checkbox" ng-model="all" ng-change="selectAll()">
        <span>全部</span>
    </label>
    <label class="ui-checkbox-inline" ng-repeat = "x in List">
      <input type="checkbox" ng-model="x.checked" ng-change="selectOne()">
      <span>{{x.name}}</span>
    </label>
  </div>
</div>

js:

$scope.checked = [];
$scope.selectAll = function () {
  if($scope.all) {
    $scope.checked = [];
    angular.forEach($scope.List, function (i) {
      i.checked = true;
      $scope.checked.push(i.value);
    })
  }else {
    angular.forEach($scope.List, function (i) {
      i.checked = false;
      $scope.checked = [];
    })
  }
}; $scope.selectOne = function () {
  angular.forEach($scope.List , function (i) {
    var index = $scope.checked.indexOf(i.value);
    if(i.checked && index === -1) {
      $scope.checked.push(i.value);
    } else if (!i.checked && index !== -1){
      $scope.checked.splice(index, 1);
    };
  })
  if ($scope.List.length === $scope.checked.length) {
    $scope.all = true;
  } else {
    $scope.all = false;
  }
};

Angularjs:实现全选的更多相关文章

  1. AngularJS 的全选、反选实现

    目录 AngularJS 的全选.反选实现 一.需求 二.思路 三.实现 AngularJS 的全选.反选实现 一.需求 要使用 AngularJS 实现 checkbox 的全选.反选. 其中所有项 ...

  2. AngularJs实现全选功能

    html代码 <!-- 数据表格 --> <div class="table-box"> <!--工具栏--> <div class=&q ...

  3. 使用AngularJS实现简单:全选和取消全选功能

    这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: < ...

  4. angularjs实现 checkbox全选、反选的思考

    之前做了一周的打酱油测试,其实感觉其实测试也是上辈子折翼的天使. 好长时间没写代码,感觉好多都不会了. 感谢这周没有单休,我能看熬夜看奥运了.我能有时间出去看个电影,我能有时间出去逛个商城,我能有时间 ...

  5. angularJS全选功能实现

    最近在做的一个项目要增加全选和反选功能,之前只做过JQ版的全选和反选. 实现效果: 1.点击全选checkbox可以切换全选和全部清空 2.点击列表中的checkbox,当全部选中时全选选中 3.在全 ...

  6. AngularJs 简单实现全选,多选操作

    很多时候我们在处理CURD(增删改查)的时候需要实现批量操作数据,这时候就必须使用多选操作. Angular 中实现如下(当然还有很多种比笔者写的更好的方法,这里只是简单的实现.) demo 演示地址 ...

  7. angularJS 全选反选批量删除

    <th> <label for="flag"> <span ng-hide="master">全选</span> ...

  8. AngularJs 简单实现全选,多选操作(转)

    代码如下: HTML: <section> <pre>{{choseArr}}</pre> 全选: <input type="checkbox&qu ...

  9. AngularJS--购物车全选/取消全选功能实现

    刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中 ...

  10. Jquery的点击事件,三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

随机推荐

  1. BZOJ 1002 FJOI 2007 轮状病毒 暴力+找规律+高精度

    题目大意: 思路:基尔霍夫矩阵求生成树个数,不会. 可是能够暴力打表.(我才不会说我调试force调试了20分钟... CODE(force.cc): #include <cstdio> ...

  2. abap选择屏幕上的button

    1.背景:近期在看sap的一些abapDemo,看了一个比較好用的功能.分享一下.希望对用到的兄弟有帮助,主要功能是:在选择屏幕上弹出一个小窗体.放一些button在上面,触发不同button,会处理 ...

  3. Codeforces Round #316 (Div. 2) B. Simple Game

    思路:把n分成[1,n/2],[n/2+1,n],假设m在左区间.a=m+1,假设m在右区间,a=m-1.可是我居然忘了处理1,1这个特殊数据.被人hack了. 总结:下次一定要注意了,提交前一定要看 ...

  4. scikit-learn的线性回归

    scikit-learn的线性回归预测Google股票 这是机器学习系列的第一篇文章. 本文将使用Python及scikit-learn的线性回归预测Google的股票走势.请千万别期望这个示例能够让 ...

  5. javascript学习笔记总结

    1 有些浏览器可能不支持JavaScript,我们可以使用如下的方法对它们隐藏JavaScript代码. <html> <body> <script type=" ...

  6. 总结C#保留小数位数

    2.C#保留小数位N位,四舍五入 . decimal d= decimal.Round(decimal.Parse("0.55555"),2); 3.C#保留小数位N位四舍五入 M ...

  7. Unix操作系统的入门与基础

    http://dev2dev.cnblogs.com/archive/2005/10/10/251894.aspx Unix操作系统的入门与基础 与大家熟悉的Windows用户界面和使用习惯不同,Un ...

  8. lsblk---列出所有可用块设备的信息,

    lsblk命令用于列出所有可用块设备的信息,而且还能显示他们之间的依赖关系,但是它不会列出RAM盘的信息.块设备有硬盘,闪存盘,cd-ROM等等.lsblk命令包含在util-linux-ng包中,现 ...

  9. android反编译odex文件

    关于android的反编译工具,相信大家并不陌生 如APK-TOOL,dex2jar APK-TOOL 用于反编译出布局文件 下载地址http://code.google.com/p/android- ...

  10. [Python] Use Python Classes

    Object oriented classes work much like classes in other languages. Learn how to create them and use ...