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 相关文章推荐
Jquery判断IE6等浏览器的代码
Apr 05 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
jQuery中选择器小问题(新人难免遇到)
Mar 31 Javascript
禁用Enter键表单自动提交实现代码
May 22 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
关于angular js_$watch监控属性和对象详解
Apr 24 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
JS实现省市县三级下拉联动
Apr 10 Javascript
ES6字符串的扩展实例
Dec 21 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 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连接MongoDB示例代码
2012/09/06 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
vue实现分页栏效果
2019/06/28 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
python实现二叉查找树实例代码
2018/02/08 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
浅谈keras中的目标函数和优化函数MSE用法
2020/06/10 Python
python 带时区的日期格式化操作
2020/10/23 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
python 实现Harris角点检测算法
2020/12/11 Python
python中的时区问题
2021/01/14 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
《新型玻璃》教学反思
2014/04/13 职场文书
教师节倡议书
2014/08/30 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
详解如何用Python实现感知器算法
2021/06/18 Python