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 相关文章推荐
js弹出的对话窗口永远保持居中显示
Dec 15 Javascript
把jquery 的dialog和ztree结合实现步骤
Aug 02 Javascript
js确认删除对话框效果的示例代码
Feb 20 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 Javascript
jquery Banner轮播选项卡
Dec 26 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
JavaScript中的编码和解码函数
Feb 15 Javascript
深入理解ES7的async/await的用法
Sep 09 Javascript
Javascript 之封装(Package)
Sep 14 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
js函数和this用法实例分析
Mar 13 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+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
Yii的CDbCriteria查询条件用法实例
2014/12/04 PHP
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
php多线程并发实现方法
2016/09/30 PHP
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
JavaScript中的排序算法代码
2011/02/22 Javascript
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
js实现验证码功能
2020/07/24 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
python求质数的3种方法
2018/09/28 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
python 实现汉诺塔游戏
2020/11/28 Python
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
大学生四年生活自我鉴定
2013/11/21 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android
mysql事务对效率的影响分析总结
2021/10/24 MySQL