Angularjs Ng_repeat中实现复选框选中并显示不同的样式
来源:互联网 发布:单兵数字侦察软件 编辑:程序博客网 时间:2024/06/04 23:30
页面代码:
<!-- 弹出层 --><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设置的[]中的名称一致即可。
0 0
- Angularjs Ng_repeat中实现复选框选中并显示不同的样式
- AngularJS判断checkbox/复选框是否选中并实时显示
- angularJs复选框checkbox选中进行ng-show显示隐藏
- AngularJS中实现奇偶行不同样式
- 增加一个复选框到上一个程序中使得选中或不选中复选框时插入的文字不同
- android studio checkbox复选框的选中,并显示打印出来
- Qt 在同一个QLabel中实现不同样式的显示
- Qt 在同一个QLabel中实现不同样式的显示
- ListView某一行被选中后显示不同的样式
- 使用js实现-动态显示复选框选中个数
- flex在DataGrid中添加checkbox复选框,并获取选中的值
- jquery实现带复选框的表格行选中删除时高亮显示
- 动态生成TreeView并实现单击选中复选框同时实现复选框单选
- jquery中如实现判断复选框是否选中,获取选中单选按钮的值,获取选中复选框的值
- AngularJS:表格中选择了多个复选框后如何通过点击提交按钮将复选框选中的数据提取出来
- 更加不同的复选框显示不同的选择界面
- asp.net中复选框checkbox选中datalist中的商品后显示选中商品的临时表
- 改变复选框显示样式
- android之回调函数的意义
- iOS 集成银联支付
- 【leetcode】Array—— Minimum Size Subarray Sum(209)
- OpenStack配置解析库oslo.config的使用方法
- linux下如何更改服务器的系统时间
- Angularjs Ng_repeat中实现复选框选中并显示不同的样式
- 字母统计
- iOS Please verify that your device’s clock is properly set, and that your signing certificate is not
- html+js 设为首页 完全兼容IE
- android原生的数据库实现(ContentProvider+SQLiteOpenHelper)
- 【Android】常见面试题(一)
- X509证书验证研究(1)——环境搭建
- 什么是 DevSecOps?系列(一)
- 软件测试理论知识总结