浅谈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”; } 2、通过对象数组绑定: function ctrl($scope) { $scope.isSelected = true; } 当isSelected为true时,增加selected样式;当isSelected为false时,增加unselected样式。 3、通过key/value键值对绑定: function ctrl($scope) { $scope.isA = true; $scope.isB = false; $scope.isC = false; } 当isA为true时,增加A样式;当isB为true时,增加B样式;当isC为true时,增加C样式。 {{project.title}} 根据projects循环创建ion-item,当activeProject为当前循环到的project时,增加active样式。 几点说明: 1、不推荐第一种方法,因为controller $scope应该只有数据和行为 2、ng-class是增加相关样式,可以和class同时使用 以上就是小编为大家带来的浅谈AngularJS中ng-class的使用方法全部内容了,希望大家多多支持脚本之家~ 您可能感兴趣的文章: 详解AngularJS ng-class样式切换 angularJs的ng-class切换class 详解angularJs中关于ng-class的三种使用方式说明 AngularJS使用ng-class动态增减class样式的方法示例 AngularJS中关于ng-class指令的几种实现方式详解 AngularJS基础 ng-class-odd 指令示例 AngularJS 基础ng-class-even指令用法 AngularJS入门教程之ng-class 指令用法 AngularJS中ng-class用法实例分析 angularjs ng class 相关文章 Angular的Bootstrap(引导)和Compiler(编译)机制 这篇文章主要介绍了Angular的Bootstrap(引导)和Compiler(编译)机制的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下 2016-06-06 AngularJS入门(用ng-repeat指令实现循环输出 这篇文章主要介绍了AngularJS入门(用ng-repeat指令实现循环输出,需要的朋友可以参考下 2016-05-05 Angular如何在应用初始化时运行代码详解 这篇文章主要给大家介绍了关于Angular如何在应用初始化时运行代码的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2018-06-06 AngularJS 工作原理详解 本文主要介绍AngularJS 工作原理,这里整理了相关资料及示例代码,有兴趣的小伙伴可以参考下 2016-08-08 Angular5集成eventbus的示例代码 这篇文章主要介绍了Angular5集成eventbus的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-07-07 AngularJs根据访问的页面动态加载Controller的解决方案 这篇文章主要介绍了AngularJs根据访问的页面动态加载Controller的解决方案,需要的朋友可以参考下 2015-02-02 angular2路由切换改变页面title的示例代码 本篇文章主要介绍了angular2路由切换改变页面title的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-08-08 深入理解node exports和module.exports区别 下面小编就为大家带来一篇深入理解node exports和module.exports区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2016-06-06 AngularJS入门教程之ng-checked 指令详解 本文主要讲解AngularJS ng-checked 指令,在这整理ng-checked 指令的基础知识,并附代码实例,有需要的小伙伴可以参考下 2016-08-08 在JavaScript的AngularJS库中进行单元测试的方法 这篇文章主要介绍了在JavaScript的AngularJS库中进行单元测试的方法,主要针对AngularJS中的控制器相关,需要的朋友可以参考下 2015-06-06 最新评论

有三种方法:

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的使用方法全部内容了,希望大家多多支持脚本之家~

您可能感兴趣的文章:

  • 详解AngularJS ng-class样式切换
  • angularJs的ng-class切换class
  • 详解angularJs中关于ng-class的三种使用方式说明
  • AngularJS使用ng-class动态增减class样式的方法示例
  • AngularJS中关于ng-class指令的几种实现方式详解
  • AngularJS基础 ng-class-odd 指令示例
  • AngularJS 基础ng-class-even指令用法
  • AngularJS入门教程之ng-class 指令用法
  • AngularJS中ng-class用法实例分析
张贴在3