关闭

AngularJS中ng-class使用方法

标签: AngularJS中ng-class使用
93人阅读 评论(0) 收藏 举报
分类:

      一个元素需要在不同的状态下呈现不同的样子,而在这所谓的的样子当然就是改变其css的属性,而实现动态的改变属性值,我们就需要实现动态的更换其class属性值。


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


实现方法:

1、通过数据的双向绑定(通过$scope绑定)

<div class="{{className}}"></div>  

<script type="text/javascript">
	var myApp = angular.module('myApp', []);
	myApp.controller('validateCtrl', ['$scope', function($scope) {
		$scope.className = "selected";
	}]);
</script>  

不推荐:查了下原由:“在controller涉及了classname在我看来是乎总是那么诡异,我希望的是controller是一个干净的纯javascript意义的object”,因为controller $scope应该只有数据和行为。


2、通过对象数组绑定


<div ng-class="{true:'selected',false:'unselected'}[isSelected]"></div>  

<script type="text/javascript">
	var myApp = angular.module('myApp', []);
	myApp.controller('validateCtrl', ['$scope', function($scope) {
		$scope.isSelected = true;  
	}]);
</script>  

当isSelected为true时,增加selected样式;当isSelected为false时,增加unselected样式。

但是有一点不好的只能够让一个元素拥有两种状态,虽然这么说!基本也是满足所需了,我一般都用这个。简单、直观。


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


<div ng-class="{'A':isA,'B':isB,'C':isC}"></div>  

<script type="text/javascript">
	var myApp = angular.module('myApp', []);
	myApp.controller('validateCtrl', ['$scope', function($scope) {
		$scope.isA = true; //增加class="A"; 
	}]);
</script>  


当isA为true时,增加class="A";当isB为true时,增加class="B"样式;当isC为true时,增加class="C"样式。



0
0
查看评论

AngularJS中ng-class和class的区别

首先我们看下ng-class的写法:<style> .red{ background-color:red; } .green{ background-color:green; } </style> <div ng-class="{red:x&g...
  • zhujun_xiaoxin
  • zhujun_xiaoxin
  • 2016-11-08 11:19
  • 1308

AngularJS中ng-class使用方法

有三种方法: 1、通过$scope绑定(不推荐) 2、通过对象数组绑定 3、通过key/value键值对绑定 实现方法: 1、通过$scope绑定(不推荐): function ctrl($scope) { $scope.className = "sele...
  • jumtre
  • jumtre
  • 2016-03-04 14:21
  • 35308

angularjs学习笔记--ng-class的三种使用方法

在使用原生js时,动态的控制样式的思路就是更换class,而在angularjs中ng-class指令使这一操作变得十分简单。1.通过双向数据绑定demo1js:fonction changeClass () { $scope.className = "change"; ...
  • lavender21
  • lavender21
  • 2016-09-30 12:02
  • 419

AngularJS中关于ng-class指令的几种实现方式详解

前言 开发中经常会遇到这样的需求,一个元素需要在不同的状态下呈现不同的样子,而在这所谓的的样子当然就是改变其css的属性,而实现动态的改变属性值,我们就需要实现动态的更换其class属性值。 在这给大家介绍三种方法来实现,大家可以根据自己的需求来选择方式,下面来看看。 第一种:...
  • u013184759
  • u013184759
  • 2017-02-16 10:46
  • 1215

angular中的ng-class的几种常用方式

ng-calss的几种使用方法。 .red{ width: 100px; height: 100px; background: red; } .green{ width: 100px; height: 100px;b...
  • sdfujichao
  • sdfujichao
  • 2016-07-19 19:16
  • 7235

关于AngularJS的ng-class

当通过点击改变标签元素的样式时,ng-class就派上了用场。我用的时候,是因为需要在一个A元素数组中查找被选中的A元素数组中的元素,不知道你们明白吗,就是在一个大数组里面查找小数组中的元素,如果存在样式就改变。刚开始的时候特别头疼,后来看到了ng-class,就变得简单起来。 简单来说ng-cl...
  • u011455192
  • u011455192
  • 2015-09-06 15:41
  • 342

AngularJS ng-class样式切换

1、HTML First Second Third All First ...
  • KingCruel
  • KingCruel
  • 2017-03-21 23:00
  • 3682

AngularJS中ng-class使用

有三种方法: 1、通过$scope绑定(不推荐) 2、通过对象数组绑定 3、通过key/value键值对绑定 实现方法: 1、通过$scope绑定(不推荐): [javascript] view plain co...
  • qq_29849641
  • qq_29849641
  • 2017-03-10 15:00
  • 436

angularJs中的ng-class动态改变样式

exam1.html<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="angu...
  • u012396955
  • u012396955
  • 2017-05-28 17:27
  • 358

angularjs ng-class

apihttps://docs.angularjs.org/api/ng/directive/ngClass http://docs.ngnice.com/api/ng/directive/ngClass使用方式The directive operates in three different w...
  • superjunjin
  • superjunjin
  • 2017-01-10 11:12
  • 790
    个人资料
    • 访问:130838次
    • 积分:2859
    • 等级:
    • 排名:第14746名
    • 原创:170篇
    • 转载:33篇
    • 译文:0篇
    • 评论:16条
    最新评论