AngularJS中ng-class使用方法

朴灿烈づ我的快乐病毒、 2021-09-14 06:58 339阅读 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"样式。