Angularjs 中的 ng-class 使用方法详解-JavaScript中文网-JavaScript教程资源分享门户

在 AngularJS 中，ng-class 是一个非常实用的指令，它允许你在 HTML 元素上动态地添加或删除一个或多个 CSS 类，以便在不同的状态下呈现不同的样式。本文将为你详细介绍 ng-class 的使用方法以及一些实用技巧，帮助你更好地掌握这一指令。

ng-class 的基本用法

ng-class 的基本语法为：

<element ng-class="{class1: expression1, class2: expression2, class3: expression3}">

其中，class1、class2、class3 是 CSS 类名，而 expression1、expression2、expression3 则是与它们对应的 AngularJS 表达式，根据表达式的值决定是否添加该 CSS 类。

举个例子，假设你需要根据变量 isError 的值来决定文本框的边框颜色，如下所示：

<input type="text" ng-class="{error: isError}">

如果 isError 的值为 true，那么该文本框就会被添加 error 这个 CSS 类，从而呈现出红色的边框。

ng-class 的高级用法

除了上述基本用法外，ng-class 还支持许多高级用法，以下是一些常用的技巧。

切换多个 CSS 类

你可以将多个 CSS 类组合在一起，以实现更复杂的样式效果。例如：

<div ng-class="{class1: condition1, class2: condition2, class3: condition3}"></div>

这里的 class1、class2、class3 代表不同的 CSS 类，condition1、condition2、condition3 则是它们对应的判断条件。如果多个条件都为 true，那么这几个 CSS 类都会被添加到该 div 元素上。

使用对象来切换 CSS 类

当你的 CSS 类很多时，可以使用一个对象来统一管理，以避免代码过于冗长：

<div ng-class="myClasses"></div>

$scope.myClasses = {
    class1: condition1,
    class2: condition2,
    class3: condition3
};

这里 myClasses 是一个对象，它的属性代表不同的 CSS 类，而属性值则是它们对应的判断条件。在 HTML 中，我们只需要使用 ng-class="myClasses"，就可以让 AngularJS 自动根据条件判断来切换 CSS 类。

利用表达式来动态生成 CSS 类

在 ng-class 内部的表达式中，你可以使用任意 AngularJS 表达式来生成 CSS 类名，从而实现更加灵活的效果。例如：

<div ng-class="type + '-' + size"></div>

这里 type 和 size 都是在控制器中定义的变量，它们的值会根据不同的情况动态计算，从而生成不同的 CSS 类名。

缩写形式

最后，我们还可以使用缩写形式来简化 ng-class 的写法。例如：

<div class="some-class" ng-class="{class1: condition1}" ng-click="handler()"></div>

这里 ng-class="{class1: condition1}" 可以缩写为 class1: condition1，从而更加简洁明了。

示例代码

下面是一个完整的示例代码，展示了 ng-class 的多个用法：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>ng-class Demo</title>
    <style>
        .error {border: 1px solid red;}
        .success {border: 1px solid green;}
        .warning {border: 1px solid yellow;}
        .info {border: 1px solid blue;}
    </style>
</head>
<body ng-controller="myCtrl">
    <h1>ng-class Demo</h1>
    <div>
        <input type="checkbox" ng-model="isError"> Error
        <input type="checkbox" ng-model="isSuccess"> Success
        <input type="checkbox" ng-model="isWarning"> Warning
        <input type="checkbox" ng-model="isInfo"> Info
        <br><br>
        <input type="text" ng-class="{error: isError, success: isSuccess, warning: isWarning, info: isInfo}" placeholder="Enter something...">
    </div>
    <div ng-repeat="item in items" ng-class="{'fade-in-down': $index%2==0, 'fade-in-up': $index%2!=0}">
        <h2>{{item.title}}</h2>
        <p>{{item.text}}</p>
    </div>
    <div ng-class="type + '-' + size" class="my-div"></div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
        $scope.items = [
            {title: 'Title 1', text: 'Some text 1'},
            {title: 'Title 2', text: 'Some text 2'},
            {title: 'Title 3', text: 'Some text 3'}
        ];
        $scope.type = 'custom';
        $scope.size = 'small';
    });
</script>
</html>

在这个例子中，我们使用 ng-class 来动态切换文本框的边框颜色，以及列表项的淡入淡出动画效果。我们还利用 ng-class 的表达式功能来动态生成一个自定义的 CSS 类名，从而让一个 div 呈现出不同的样式。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d7df43a941bf7134e15077

Angularjs 中的 ng-class 使用方法详解