ng级指令在AngularJS中, 用于指定HTML元素上的CSS类。它用于动态绑定HTML元素上的类。如果ng-class指令中的表达式返回true, 则仅添加该类, 否则不添加。所有HTML元素都支持它。
语法如下:
<
element ng-class="expression">
Contents... <
/element>
范例1:本示例使用ng-class指令设置和重置CSS类。
<
!DOCTYPE html>
<
html >
<
head >
<
title >
ng-class Directive<
/ title >
<
script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/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" >
lsbin<
/ h1 >
<
h2 >
ng-class Directive<
/ h2 >
<
div >
<
input type = "button" ng-click = "edit=true" value = "https://www.lsbin.com/Style" />
<
input type = "button" ng-click = "edit=false" value = "https://www.lsbin.com/Reset" />
<
br >
<
br >
<
span ng-class = "{true:'edit'}[edit]" >
lsbin
<
/ span >
is the computer science portal for geeks.
<
/ div >
<
/ body >
<
/ html >
输出如下:
单击按钮之前:
文章图片
单击样式按钮后:
文章图片
范例2:本示例使用ng-class指令将CSS样式设置为该类。
<
!DOCTYPE html>
<
html >
<
head >
<
title >
ng-class Directive<
/ title >
<
script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js" >
<
/ script >
<
style type = "text/css" >
.index {
color: white;
background-color: green;
}
<
/ style >
<
/ head >
<
body ng-app = "app" style = "padding:20px" >
<
h1 style = "color:green" >
lsbin<
/ h1 >
<
h2 >
ng-class Directive<
/ h2 >
<
div ng-controller = "geek" >
<
table >
<
thead >
<
th >
Select any sorting technique:<
/ 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 >
var app = angular.module("app", []);
app.controller('geek', ['$scope', function ($scope) {
$scope.sort = [
{ name: "Merge sort" }, { name: "Quick sort" }, { name: "Bubble sort" }
];
$scope.sel = function (index) {
$scope.row = index;
};
}]);
<
/ script >
<
/ body >
<
/ html >
输出如下:
选择元素之前:
文章图片
【AngularJS ng类指令用法详细介绍】选择元素后:
文章图片
推荐阅读
- 如何为Microsoft软件开发工程面试做准备()
- 诺基亚面试体验(在校园内)
- 贝宝Paypal面试经验| SDE 1(校园内)
- 如何从JavaScript中的数组中选择一个随机元素()
- 如何在Java中查找字符串的第一个和最后一个字符
- 算法设计(查找链表的长度(迭代和递归))
- C++中函数的默认参数用法指南
- 导致笔记本打开变慢的“凶手”到底是谁
- windwos7小技巧——aero的设置及窗口颜色