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 使用form表单select类实现级联菜单效果
Dec 19 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
关于Javascript作用域链的八点总结
Dec 06 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
jQuery Validate表单验证深入学习
Dec 18 Javascript
js实现添加删除表格(两种方法)
Apr 27 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
EasyUI在Panel上动态添加LinkButton按钮
Aug 11 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 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 smarty模版引擎中变量操作符及使用方法
2009/12/11 PHP
PHP 观察者模式的实现代码
2013/05/10 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
jQuery 选择器理解
2010/03/16 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
vue实现选中效果
2020/10/07 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
python_mask_array的用法
2020/02/18 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
旅游业大学生创业计划书
2014/01/31 职场文书
矿泉水广告词
2014/03/20 职场文书
抗震救灾标语
2014/06/26 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
2015年采购员工作总结
2015/04/27 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
超详细Python解释器新手安装教程
2021/05/10 Python
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫