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 相关文章推荐
我见过最全的个人js加解密功能页面
Dec 12 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 Javascript
vue实现图片裁剪后上传
Dec 16 Vue.js
Ajax请求超时与网络异常处理图文详解
May 23 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
JavaScript Accessor实现说明
2010/12/06 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
VUE 全局变量的几种实现方式
2018/08/22 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
js中arguments对象的深入理解
2019/05/14 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python中list常用操作实例详解
2015/06/03 Python
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
技术经理的自我评价范文
2013/12/03 职场文书
财务部经理岗位职责
2014/02/03 职场文书
大学秋游活动方案
2014/02/11 职场文书
关于教师节的演讲稿
2014/09/04 职场文书
法人授权委托书
2014/09/16 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
出国留学单位推荐信
2015/03/26 职场文书
Python基础之数据结构详解
2021/04/28 Python
Django一小时写出账号密码管理系统
2021/04/29 Python
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL
mysql 排序失效
2022/05/20 MySQL