汉堡请不要欺负面条

一个漫长的学习之路!!!

AngularJS中ng-class使用方法

      一个元素需要在不同的状态下呈现不同的样子,而在这所谓的的样子当然就是改变其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"样式。



阅读更多
个人分类: AngularJs
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭