English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<style>
.sky {
color: white;
background-color: lightblue;
padding: 20px;
font-family: "Courier New";
}
.tomato {
background-color: coral;
padding: 40px;
font-family: Verdana;
}
</style>
</head>
<body ng-app="">
<p>اختر فئة:</p>
<select ng-model="home">
<option value="sky">لون السماء</option>
<option value="tomato">لون البندورة</option>
</select>
<div ng-class="home">
<h1>مرحبًا بكم في المنزل!</h1>
<p>أحبها!</p>
</div>
</body>
</html>اختبره و شاهد ‹/›ng-class تعليمات تستخدم لربط CSS فئة واحدة أو أكثر لعدة عناصر HTML ديناميكيًا.
ng-class يمكن أن تكون قيمة التعليمات أنواع سلسلة أو كائن أو قائمة.
إذا كانت سلسلة، يتم فصل الأسماء الفئوية باستخدام مسافات.
إذا كانت كائنًا، يجب استخدام مفتاح-قيمة، حيث يكون المفتاح هو الاسم الذي تريد إضافته، والقيمة هي قيمة بولية. سيتم إضافة الفئة فقط إذا كان القيمة صحيحة.
إذا كانت قائمة، يمكن أن تكون مكونة من أنواع سلسلة أو كائنات، يمكن أن تكون عناصر القائمة أنواع سلسلة أو كائنات.
<element ng-class="expression"></element>
جميع عناصر HTML يدعمونها.
| القيمة | وصف |
|---|---|
| expression | تعبر العبارة عن فئة واحدة أو أكثر. |