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 相关文章推荐
jQuery 可以拖动的div实现代码 脚本之家修正版
Jun 26 Javascript
新鲜出炉的js tips提示效果
Apr 03 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
基于jQuery实现音乐播放试听列表
Apr 14 Javascript
Jquery元素追加和删除的实现方法
May 24 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
Vue自定义toast组件的实例代码
Aug 15 Javascript
javascript实现导航栏分页效果
Jun 27 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
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
美国小蜜蜂Burt’s Bees德国官网:天然唇部、皮肤和身体护理产品
2020/06/14 全球购物
Linux如何为某个操作添加别名
2015/02/05 面试题
美国留学经济担保书
2014/05/20 职场文书
公司停电通知
2015/04/15 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers
把77A收信机改造成收音机
2022/04/05 无线电