数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会科学
时装研究
法律研究angularjs – ng-class 指令
angularjs 中的ng-class 指令允许用户通过数据绑定表达式动态设置 HTML 元素上的 CSS 类，该表达式将进一步表示要添加的所有这些类。当ngClass 指令内的表达式返回 True 时才添加该类，否则将不会添加。它受所有 HTML 元素支持。
如果该指令已经设置了，则不会设置任何重复的类。当表达式更改时，先前的已添加的类将被删除，仅之后才会添加新的类。
语法
<element ng-class="expression">..Content..</element>
示例 - ngClass 指令
在 Angular 项目目录中创建一个文件 "ngClass.html"，然后复制并粘贴以下代码段。
<!DOCTYPE html>
<html>
<head>
<title>ngClass Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style>
.edit {
color: green;
font-size: 1.5em;
}
</style>
</head>
<body ng-app="" style="text-align: center;">
<h1 style="color:green">
Welcome to Tutorials Point
</h1>
<h2>
angularjs | ngClass Directive
</h2>
<div>
<input type="button" ng-click="edit=true" value="Style" />
<input type="button" ng-click="edit=false" value="Reset" />
<br><br>
<span ng-class="{true:'edit'}[edit]">
SIMPLY EASY LEARNING
</span>
</div>
</body>
</html>输出
要运行以上代码，只需转到你的文件并将其作为一个普通的 HTML 文件运行。您将在浏览器窗口中看到以下输出。
示例 2
在 Angular 项目目录中创建一个文件 "ngClass.html"，然后复制并粘贴以下代码段。
<!DOCTYPE html>
<html>
<head>
<title>ngClass Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script>
<style>
.index {
color: white;
background-color: green;
}
</style>
</head>
<body ng-app="app" style="text-align: center;">
<h1 style="color: green;">
Welcome to Tutorials Point
</h1>
<h2>
angularjs | ngClass Directive
</h2>
<div ng-controller="demo" style="margin-left: auto; margin-right: auto; text-align: center; display: block;">
<table style="text-align: center;">
<thead>
<th>Select any frontend framework:</th>
<tr ng-repeat="i in sort">
<td ng-class="{index:$index==row}" ng-click="sel($index)">
{{i.name}}
</td>
</tr>
</thead>
</table>
</div>
<!-- Script for passing the values and checking... -->
<script>
var app = angular.module("app", []);
app.controller("demo", [
"$scope",
function ($scope) {
$scope.sort = [{ name: "angularjs" }, { name: "ReactJS"}, { name: "VueJS" }];
$scope.sel = function (index) {
$scope.row = index;
};
},
]);
</script>
</body>
</html>输出
要运行以上代码，只需转到你的文件并将其作为一个普通的 HTML 文件运行。您将在浏览器窗口中看到以下输出。
更新于:2021 年 10 月 8 日
599 次浏览
广告