AngularJs----ng-class

前端之家收集整理的这篇文章主要介绍了AngularJs----ng-class前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在angular中为我们提供了3种方案处理class:

1:scope变量绑定(不推荐使用)

function ctr($scope){
    $scope.test =“classname”;
}
<div class=”{{test}}”></div>

2:字符串数组形式。

function Ctr($scope) {
    $scope.isActive = true;
}
<div ng-class="{true: 'active',false: 'inactive'}[isActive]">

3:对象key/value处理。

function Ctr($scope) {
    $scope.isSelected=true;
    $scope.isCar=true;
}
<div ng-class={'selected' isSelected,'car':isCar}"></div>
<!--
当 isSelected = true 则增加selected class;否则删除selected class
当isCar=true,则增加car class,
所以你结果可能是4种组合。
-->
实例1:

<div class="container" ng-app="myApp" ng-controller="myCtrl">
    <p>
        <button class="btn btn-info" ng-click="infoClick()">info样式</button>
        <button class="btn btn-danger" ng-click="dangerClick()">danger样式</button>
    </p>
    <div class="alert" ng-class="{'alert-info active':isInfo,'alert-danger':isDanger}">
        <p>设置alert 的样式</p>
    </div>
</div>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function ($scope) {
    console.info($scope.style);
    $scope.infoClick = function () {
        $scope.isInfo = true;
        $scope.isDanger = false;
    }
    $scope.dangerClick = function () {
        $scope.isInfo = false;
        $scope.isDanger = true;
    }
});

猜你在找的Angularjs相关文章