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

你们好，我是IT修真院郑州分院第七期的学员冯亚超，一枚正直纯洁善良的WEB程序员 今天给你们分享一下，题目angular js 经常使用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？

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 时类才会被添加。
若是是数组，能够由字符串或对象组合组成，数组的元素能够是字符串或对象。

NG-OPTION
ng-options 指令用于使用options填充select元素的选项。

ng-options属性能够在表达式中使用数组或对象来自动生成一个select中的option列表。 ng-options与ng-repeat很类似，不少时候能够用ng-repeat来代替ng-options。 可是ng-options提供了一些好处，例如减小内存提升速度，以及提供选择框的选项来让用户选择。

NG-VALUE
ng-value 指令用于设置 input 或 select 元素的 value 属性。和value相比，它的值能够是表达式，因此相比之下能够实现更多需求。

好比当须要使用ng-repeat来动态生成input[]的时候，ngValue是颇有用处的。

NG-CLICK
ng-click 指令告诉了 AngularJS HTML 元素被点击后须要执行的操做。
若是是使用ng-click来实现函数的执行的话，还能够进行传参。

一个ng-click能够触发多个操做

3、常见问题

ng-option表达式的写法

4、解决方案

NG-OPTION表达式的写法
一、数组做为数据源
用数组中的值作标签。(label for value in array)
用数组中的值做为选中的标签。(select as label for value in array)
用数组中的值作标签组。(label group by group for value in array)

用数组中的值做为选中的标签组。(select as label group by group for value in array track by trackexpr)

二、对象做为数据源
用对象的键-值（key-value）作标签。(label for (key , value) in object)
用对象的键-值做为选中的标签。(select as label for (key , value) in object)
用对象的键-值做为标签组。(label group by group for (key, value) in object)

用对象的键-值做为选中的标签组。(select as label group by group for (key, value) in ob)

ng-options的值能够是一个内涵表达式（comprehension expression）， 其实这只是一种有趣的说法，简单来讲就是它能够接收一个数组或者对象， 并对它们进行循环，将内部的内容提供给select标签内部的选项。ng-options属性可用于使用经过评估理解表达式得到的数组或对象来动态生成option 元素的select元素。

5、编码实战

腾讯视频

6、拓展思考

7、参考文献

ng-class用法

angular之ng-value指令

ng-select和ng-options

8、更多讨论

用angularJS的ng-model绑定到select上，会自动增长一个value为空的option,这是为何？

缘由：ng-model没有初始化致使的， 若是ng-model所绑定的变量的值在ng-options绑定的value里面有， 下拉选框中就不会有空白的一项，选中别的数据项之后消失； 若是ng-model所绑定的变量的值不在ng-options绑定的value里面， 下拉选框中就不会有空白一项,而且只有当ng-options绑定的value里有对应 的text为空行时，这个空行才会一直存在于下拉选项里。

解决办法
方法一：将select中的一个option设置为空，就能够防止因添加ng-model自动添加空option的问题
方法二：本身预先添加一个value为空的option，再用ng-if="false"把它去掉

PPT