Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法


Posted in Javascript onSeptember 12, 2018

页面代码:

<!-- 弹出层 -->
<section class="popup-bg" ng-if="IsActive">
 <div class="popup-box phone-detail">
  <div class="popup-title popup-detail-title">通讯录
   <i class="iconfont popup-close-font rights " ng-click="HideMail()"></i>
  </div>
  <div class="content">
   <div class="phone" ng-repeat="User in NoticeUserList">{{User.Name}}
    <div class="check-item rights">
     <div class="check-bg"
       ng-class="{true:'checkeds',false:'uncheckeds',}[active]">
     </div>
     <input type="checkbox" ng-model="active" class="checkboxs" value="User.Name"
       ng-click="itemSelected($event,User.Id,active)">
    </div>
   </div>
  </div>
 </div>
</section>

Controller中代码:

$scope.itemIds = [];
$scope.active = false;
$scope.itemSelected = function ($event, pid, active) {
 var checkbox = $event.target;
 if (checkbox.checked) {
  $scope.itemIds.push(pid);
 } else {
  $scope.itemIds = Tools.arrRemove($scope.itemIds, pid);
 }
 console.log(active);
 console.log($scope.itemIds);
};

总结: 此处开始写的时候没有使用NG-MODEL,导致复选框选中一个,其他的复选框样式都跟着变化了,重点就是加上NG-MODEL,并且和NG-CLASS设置的[]中的名称一致即可。

以上这篇Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
web css实现整站样式互相切换
Oct 29 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
24款热门实用的jQuery插件推荐
Dec 24 Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
浅谈Vue初学之props的驼峰命名
Jul 19 Javascript
浅谈小程序 setData学问多
Feb 20 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 Javascript
JavaScript缺少insertAfter解决方案
Jul 03 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 #Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 #Javascript
vue服务端渲染缓存应用详解
Sep 12 #Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 #Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 #Javascript
详解JavaScript中操作符和表达式
Sep 12 #Javascript
JS 数组随机洗牌的实例代码
Sep 12 #Javascript
You might like
开发大型PHP项目的方法
2006/10/09 PHP
用Php实现链结人气统计
2006/10/09 PHP
第十五节--Zend引擎的发展
2006/11/16 PHP
建站常用13种PHP开源CMS比较
2009/08/23 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
js 数组克隆方法 小结
2010/03/20 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
python 字符串和整数的转换方法
2018/06/25 Python
python如何求解两数的最大公约数
2018/09/27 Python
python中的列表与元组的使用
2019/08/08 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
Python callable内置函数原理解析
2020/03/05 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
Python hashlib和hmac模块使用方法解析
2020/12/08 Python
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
北京振戎融通Java面试题
2015/09/03 面试题
青年志愿者事迹材料
2014/02/07 职场文书
大一新生学期自我评价
2014/04/09 职场文书
反邪教宣传工作方案
2014/05/07 职场文书
公司会议策划方案
2014/05/17 职场文书
应届大专生求职信
2014/06/26 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
乔迁新居祝福语
2019/11/04 职场文书
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS