首页 > 代码库 > directive ngClass

directive ngClass

2024-10-05 10:40:02   215人阅读

　　ngClass指令允许您通过绑定一个表示要添加的所有类的表达式来动态地在HTML元素上设置CSS类。

　　该指令有三种不同的方式，这取决于表达式求值的三种类型:

　　　　如果表达式计算为字符串，那么字符串应该是一个或多个空格分隔的类名。

　　　　如果表达式对一个对象进行计算，那么对于具有truthy值的对象的每个键值对，对应的键就被用作类名。

　　　　如果表达式计算为一个数组，那么数组中的每个元素都应该是类型1中的字符串，或者是类型2中的对象。这意味着您可以将字符串和对象组合在一个数组中，从而使您能够更好地控制CSS类的出现。请参阅下面的代码以获得一个示例。

　　当表达式发生变化时，先前添加的类被删除，并且只有在新的类被添加时才会被删除。

例子：

index.html

<!DOCTYPE html>
<html ng-app="bindExample">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .strike {
            text-decoration: line-through;
        }
        .bold {
            font-weight: bold;
        }
        .red {
            color: red;
        }
        .has-error {
            color: red;
            background-color: yellow;
        }
        .orange {
            color: orange;
        }
    </style>
</head>
<body ng-controller="ExampleController">
<div>
    <p ng-class="{‘strike‘: deleted, ‘bold‘: important, ‘has-error‘: error}">Map Syntax Example</p>
    <label>
        <input type="checkbox" ng-model="deleted">
        deleted (apply "strike" class)
    </label><br>
    <label>
        <input type="checkbox" ng-model="important">
        important (apply "bold" class)
    </label><br>
    <label>
        <input type="checkbox" ng-model="error">
        error (apply "has-error" class)
    </label>
</div><hr>
<div>
    <p ng-class="style">Using String Syntax</p>
    <input type="text" ng-model="style"
           placeholder="Type: bold strike red" aria-label="Type: bold strike red">
</div><hr>
<div>
    <p ng-class="[style1, style2, style3]">Using Array Syntax</p>
    <input ng-model="style1"
           placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red"><br>
    <input ng-model="style2"
           placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 2"><br>
    <input ng-model="style3"
           placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 3"><br>
</div><hr>
<div>
    <p ng-class="[style4, {‘orange‘: warning}]">Using Array and Map Syntax</p>
    <input ng-model="style4" placeholder="Type: bold, strike" aria-label="Type: bold, strike"><br>
    <label><input type="checkbox" ng-model="warning"> warning (apply "orange" class)</label>
</div><hr>
<script src="framework/angular.js"></script>
<script src="js/bbb.js"></script>
</body>
</html>

script.js

angular.module(‘bindExample‘, [])
    .controller(‘ExampleController‘, [‘$scope‘, function($scope) {
        $scope.deleted = false;
        $scope.important = false;
        $scope.error = false;
        $scope.style = "";
        $scope.style1 = "";
        $scope.style2 = "";
        $scope.style3 = "";
        $scope.style4 = "";
        $scope.warning = false;
    }]);

例2

<!DOCTYPE html>
<html ng-app="bindExample">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .base-class {
            transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
        }

        .base-class.my-class {
            color: red;
            font-size:3em;
        }
    </style>
</head>
<body ng-controller="ExampleController">
<div>
    <input id="setbtn" type="button" value="set" ng-click="myVar=‘my-class‘">
    <input id="clearbtn" type="button" value="clear" ng-click="myVar=‘‘">
    <br>
    <span class="base-class" ng-class="myVar">Sample Text</span>
</div><hr>
<script src="framework/angular.js"></script>
<script src="js/bbb.js"></script>
</body>
</html>

 

directive ngClass


联系
我们