AngularjsNg_repeat中实现复选框选中并显示不同的样式方法资源-CSDN文库

135 浏览量 2020-10-18 00:52:56 上传评论收藏 33KB PDF 举报

资源推荐

资源详情

资源评论

Angularjs Ng_repeat中实现复选框选中并显示不同的样式方中实现复选框选中并显示不同的样式方

法法

今天小编就为大家分享一篇Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法，具有很好的参考价

值，希望对大家有所帮助。一起跟随小编过来看看吧

页面代码：页面代码：

<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中实现复选框选中并显示不同的样式方法就是小编分享给大家的全部内容了，希望能给大家一

个参考，也希望大家多多支持我们。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

内容反馈

weixin_38666753

粉丝: 7
资源: 909

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip