脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → Angularjs Ng_repeat中实现复选框选中并显示不同的样式

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

 更新时间：2018年09月12日 15:25:45   作者：笨老鼠  
今天小编就为大家分享一篇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()">&#xe61c;</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中实现复选框选中并显示不同的样式方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 简述AngularJS的控制器的使用

    简述AngularJS的控制器的使用

    这篇文章主要介绍了AngularJS的控制器的使用,文中给出了具体的用于HTML中的对象示例,需要的朋友可以参考下
    2015-06-06
  • AngularJS自定义控件实例详解

    AngularJS自定义控件实例详解

    这篇文章主要介绍了AngularJS自定义控件,结合实例形式详细分析了AngularJS自定义指令与模板操作的相关函数与使用技巧,需要的朋友可以参考下
    2016-12-12
  • AngularJS使用指令增强标准表单元素功能

    AngularJS使用指令增强标准表单元素功能

    这篇文章主要介绍了AngularJS使用指令增强标准表单元素功能，包括数据绑定、建立模型属性、验证表单等，感兴趣的小伙伴们可以参考一下
    2016-07-07
  • 使用ngView配合AngularJS应用实现动画效果的方法

    使用ngView配合AngularJS应用实现动画效果的方法

    这篇文章主要介绍了使用ngView配合AngularJS应用实现动画效果的方法,AngularJS是十分热门的JavaScript库,需要的朋友可以参考下
    2015-06-06
  • 详解AngularJS中的http拦截

    详解AngularJS中的http拦截

    这篇文章主要为大家详细介绍了AngularJS中的http拦截，$http服务允许我们与服务端交互，有时候我们希望在发出请求之前以及收到响应之后做些事情。即http拦截,需要的朋友可以参考下
    2016-02-02
  • Angular4 ElementRef的应用

    Angular4 ElementRef的应用

    本篇文章主要介绍了Angular4 ElementRef的应用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • AngularJS ng-blur 指令详解及简单实例

    AngularJS ng-blur 指令详解及简单实例

    本文主要介绍AngularJS ng-blur 指令，这里对ng-blur 指令的知识详细介绍给大家，并给大家一个实例作为参考，有需要的小伙伴可以参考下
    2016-07-07
  • 利用Angular.js限制textarea输入的字数

    利用Angular.js限制textarea输入的字数

    相信在大家已经学习了足够多关于AngularJS的知识后，就可以开始创建第一个AngularJS应用程序，这篇文章通过示例给大家介绍如何利用Angular.js限制textarea输入的字数，有需要的朋友们可以参考借鉴，下面来一起看看吧。
    2016-10-10
  • 在Angular使用ng-container元素的操作详解

    在Angular使用ng-container元素的操作详解

    ng-container 是 Angular 2+ 中可用的一个元素,可以作为结构指令的宿主,在本文中,您将探讨可以使用 ng-container 解决的场景,文中有相关的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下
    2024-02-02
  • AngularJS在IE下取数据总是缓存问题的解决方法

    AngularJS在IE下取数据总是缓存问题的解决方法

    这篇文章主要介绍了AngularJS在IE下取数据总是缓存问题的解决方法,分析了问题的原因及AngularJS设置禁止IE对ajax缓存的实现方法,需要的朋友可以参考下
    2016-08-08

最新评论