資料結構
網路
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 次瀏覽
廣告