angular框架实现全选与单选chekbox的自定义


Posted in Javascript onJuly 06, 2017

2017年7月4日,我原本可以像其他同时一样早点回家,玩几把王者荣耀,但是我没有,因为我选择留下来,写一篇博客。

项目中经常性的会遇到什么点击“全选”按钮,勾中所有“单选按钮”,当所有单选按钮勾选后,全选按钮自动勾选,这里我并不是想说这是多么难的一个事情,我只是想炫耀下自己写的东西。

(勾选与否,是切换类名来实现的)换一个背景图片而已

1)页面内容(静态页)

<ul class='list-inline my-list-inline'>
<li class="action-check" ng-class="{'active':allHasChoice}" ng-click="clicktarget(true,tmp,dataList)">

<li>中文名称</li>

<li>英文名称</li>

<li>申请人类型</li>
<ul>
<div class="list-data">
<table>

<tbody>


<tr ng-repeat="tmp in dataList track by tmp.idTell"



ng-class="{true:'active',false:''}[targetChoice[tmp.idTell]==true]"



ng-click="ctmlicktarget(false,tmp,dataList)" 


>



<td> 




<span class="choice-icon"></span>




<span class="company-name over-flow-handel-style" title="{{tmp.chineseName}}"




 ng-bind="tmp.cineseName"></span>



</td>



 <td> 




<span class="english-name over-flow-handel-style" title="{{tmp.englishName}}"



   ng-bind="tmp.englishName"></span>



 </td>



<td> 




<span class="english-name over-flow-handel-style" title="{{tmp.abbreviation}}"




 ng-bind="tmp.abbreviation"></span>



</td>

 </tr> 

</tbody>
</table>

2)js代码

首先当然有一个参数数组,用于经营经营渲染页面:

$scope.dataList=[
 {'chineseName':'百度科技','englishName':'baidukeji','abbreviation':'小度','idTell':'bd'},
  
{'chineseName':'小牛科技','englishName':'xiaoniukeji','abbreviation':'小牛','idTell':'xn'},

  {'chineseName':'京东科技','englishName':'jdkeji','abbreviation':'小京','idTell':'xj'},
 
 {'chineseName':'顺风科技','englishName':'sfkeji','abbreviation':'小风','idTell':'xf'},
 
 {'chineseName':'阿里科技','englishName':'alkeji','abbreviation':'小里','idTell':'xl'},

  {'chineseName':'淘宝科技','englishName':'tbkeji','abbreviation':'小宝','idTell':'xb'},
 
 {'chineseName':'天猫科技','englishName':'tmkeji','abbreviation':'小猫','idTell':'xm'}
];

定义一个数组用于存储,选中的选项

$scope.targetChoice=[];

定义一个很简单的方法:用于操作单选,全选的效果实现

$scope.clicktarget=function(isAllChoiceBtn,tmp,dataList){
  //isAllChoiceBtn:用于表示用户点击的是否是全选按钮,tmp:是数据集合中的一个数据对象
var count=0;//记录被选中的子选项的个数

  //说明用户点击的不是“全选”按钮
  isAllChoiceBtn==false?(function(){
 
//当前选项取反

 $scope.targetChoice[tmp.idTell]=!$scope.targetChoice[tmp.idTell];


//遍历数据集合,统计已经被购中的单选项


angular.foreach(dataList,function(v,k){
     $scope.targetChoice[v.idTell]&& count++;
    }); 
    //如果count等于数据集合得长度,说明所有的单选被购中
    count==dataList.length && $scope.allHasChoice=true:$scope.allHasChoice==false;

})()
   //说明点击的"全选"按钮
  :(function(){
    $scope.allHasChoice=!$scope.allHasChoice;//状态取反
    $scope.allHasChoice==false?
      //说明取消全选 
    :angular.forEach(dataList,function(v,k){
      $scope.targetChoice[v.idTell]=$scope.allHasChoice;
      count=0;
     })
     //说明选中全选
    :angular.forEach(dataList,function(v,k){
     $scope.targetChioce[v.idTell]=$scope.allHasChoice;
     count++;
    });
  })()
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
详解Angular Reactive Form 表单验证
Jul 06 #Javascript
让div运动起来 js实现缓动效果
Jul 06 #Javascript
老生常谈Bootstrap媒体对象
Jul 06 #Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 #jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 #jQuery
Textarea输入字数限制实例(兼容iOS&amp;安卓)
Jul 06 #Javascript
react系列从零开始_简单谈谈react
Jul 06 #Javascript
You might like
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
extJs 下拉框联动实现代码
2010/04/09 Javascript
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
详解JavaScript中的六种错误类型
2017/09/21 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
python自动化测试实例解析
2014/09/28 Python
跟老齐学Python之变量和参数
2014/10/10 Python
使用Python进行目录的对比方法
2018/11/01 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
什么是python的id函数
2020/06/11 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
维德科技C#面试题笔试题
2015/12/09 面试题
自考毕业自我鉴定范文
2013/10/27 职场文书
偷看我的初中毕业鉴定
2014/01/29 职场文书
2014年管理工作总结
2014/11/22 职场文书
上下班时间调整通知
2015/04/23 职场文书
浅谈MySQL函数
2021/10/05 MySQL
关于Python中进度条的六个实用技巧分享
2022/04/05 Python