脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → angularjs中ng class

浅谈AngularJS中ng-class的使用方法

 更新时间：2016年11月11日 10:08:16   投稿：jingxian  
下面小编就为大家带来一篇浅谈AngularJS中ng-class的使用方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

有三种方法：

1、通过$scope绑定（不推荐）
2、通过对象数组绑定
3、通过key/value键值对绑定

实现方法：

1、通过$scope绑定（不推荐）：

function ctrl($scope) {  
  $scope.className = "selected"; 
} 
<div class="{{className}}"></div>

2、通过对象数组绑定：

function ctrl($scope) {  
  $scope.isSelected = true; 
} 
<div ng-class="{true:'selected',false:'unselected'}[isSelected]"></div>

当isSelected为true时，增加selected样式；当isSelected为false时，增加unselected样式。

3、通过key/value键值对绑定：

function ctrl($scope) {  
  $scope.isA = true; 
  $scope.isB = false; 
  $scope.isC = false; 
} 
<div ng-class="{'A':isA,'B':isB,'C':isC}"></div>

当isA为true时，增加A样式；当isB为true时，增加B样式；当isC为true时，增加C样式。

<ion-list> 
  <ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}"> 
    {{project.title}} 
  </ion-item> 
</ion-list>

根据projects循环创建ion-item，当activeProject为当前循环到的project时，增加active样式。

几点说明：

1、不推荐第一种方法，因为controller $scope应该只有数据和行为

2、ng-class是增加相关样式，可以和class同时使用

以上就是小编为大家带来的浅谈AngularJS中ng-class的使用方法全部内容了，希望大家多多支持脚本之家~

您可能感兴趣的文章:

相关文章

  • Angular组件化管理实现方法分析

    Angular组件化管理实现方法分析

    这篇文章主要介绍了Angular组件化管理实现方法,结合具体实例分析了Angular模块组件化管理以提高代码复用性的实现方法与相关操作技巧,需要的朋友可以参考下
    2017-03-03
  • angular双向绑定详解

    angular双向绑定详解

    这篇文章主要为大家介绍了angular双向绑定，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2021-12-12
  • angular json对象push到数组中的方法

    angular json对象push到数组中的方法

    下面小编就为大家分享一篇angular json对象push到数组中的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • AngularJS ionic手势事件的使用总结

    AngularJS ionic手势事件的使用总结

    本篇文章主要介绍了AngularJS手势事件的使用总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • angular内置provider之$compileProvider详解

    angular内置provider之$compileProvider详解

    下面小编就为大家带来一篇angular内置provider之$compileProvider详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 使用typescript开发angular模块并发布npm包

    使用typescript开发angular模块并发布npm包

    本篇文章主要介绍了使用typescript开发angular模块并发布npm包，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Angular JS 生成动态二维码的方法

    Angular JS 生成动态二维码的方法

    这篇文章主要介绍了Angular JS 生成动态二维码的方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-02-02
  • AngularJS与后端php的数据交互方法

    AngularJS与后端php的数据交互方法

    今天小编就为大家分享一篇AngularJS与后端php的数据交互方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 利用JavaScript的AngularJS库制作电子名片的方法

    利用JavaScript的AngularJS库制作电子名片的方法

    这篇文章主要介绍了利用JavaScript的AngularJS库制作电子名片的方法,其中需要使用到HTML5的canvas画布,需要的朋友可以参考下
    2015-06-06
  • Angular组件间通信的新解决方案详解

    Angular组件间通信的新解决方案详解

    本文通过对比几种Angular组件间的通信方式,给大家介绍了一种新的Angular组件间通信的解决方案,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08

最新评论