关闭

AngularJS中ng-class使用方法

标签: AngularJS中ng-class使用
64人阅读 评论(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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:85309次
    • 积分:2373
    • 等级:
    • 排名:第17905名
    • 原创:152篇
    • 转载:26篇
    • 译文:0篇
    • 评论:15条
    最新评论