页面代码:
<!-- 弹出层 -->
<section class="popup-bg" ng-if="IsActive">
<div class="popup-box phone-detail">
<div class="popup- popup-detail- ">通讯录
<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中实现复选框选中并显示不同的样式方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
继续阅读与本文标签相同的文章
下一篇 :
是时候和TLS 1.0和1.1说再见了
-
人工智能和大数据到底有什么关系?
2026-05-15栏目: 教程
-
自动驾驶不够安全?现代绞尽脑汁开发全新安全软件平台
2026-05-15栏目: 教程
-
特斯拉交付量未达预期,今年股价已下跌27%!上海新厂成了新希望
2026-05-15栏目: 教程
-
中国工业互联网安全保障体系初步建成
2026-05-15栏目: 教程
-
Word里面如何设置行距
2026-05-15栏目: 教程
