DragonWar%
DragonWar%

Angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【Angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？】

 

 

                                               

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍
指令是一个Dom元素上的标签(和元素上的属性,CSS类样式一样，属于这个Dom元素)，它告诉AngualrJS的HTML编译器，去附加一个行为到这个Dom元素上去，这个行为可以改变这个Dom元素，或者这个Dom元素的子元素。

AngularJS通过被称为指令的新属性来扩展HTML。

AngularJS通过内置的指令来为应用添加功能。AngularJS内置指令是扩展的HTML属性，带有前缀ng-。

2.知识剖析
ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？

ng-if：

ng-if指令用于在表达式为false时移除HTML元素。

如果ng-if语句执行的结果为true，会添加HTML元素，并显示。

ng-if指令不同于ng-hide/ng-show，ng-hide/ng-show是隐藏元素,设置元素的display为none。而ng-if是从DOM中移除元素。

ng-hide指令在表达式为true时隐藏指定的HTML元素。

ng-show指令在表达式为true时显示指定的HTML元素。

ng-class：

ng-class指令用于给HTML元素动态绑定一个或多个CSS类。

ng-class指令的值可以是字符串，对象，或一个数组。

如果是字符串，多个类名使用空格分隔。

如果是对象，需要使用key-value对，key为你想要添加的类名，value是一个布尔值。只有在value为true时类才会被添加。

如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。

第一种

 
 `

functionctr($scope){

$scope.test=“classname”;

}

这种方式完全没错，是angular提供的一种改变class的方式，但是在controller涉及了classname他让controller不再是一个干净的纯javascript意义的object。不推荐使用

第二种

 
 

functionCtr($scope){

$scope.isActive=true;

}

其结果是2中组合，isActive表达式为true，则active，负责inactive。

第三种

 

functionCtr($scope){

}

当isSelected=true则增加selectedclass，当isCar=true,则增加carclass，所以你结果可能是4种组合。

ng-option：

ng-options指令用于使用填充