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元素动态绑定一个或多