ANGULAR JS 常用指令
大家好，我是IT修真院成都分院第六期的学员李兴，一枚正直纯洁善良的WEB前端程序员。
今天给大家分享一下，修真院官网JS任务9，ANGULAR自带指令有哪些？
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 指令用于使用 填充 元素的选项。
NG-OPTIONS属性可以在表达式中使用数组或对象来自动生成一个SELECT中的OPTION列表。NG-OPTIONS与NG-REPEAT很相似，很多时候可以用NG-REPEAT来代替NG-OPTIONS。但是NG-OPTIONS提供了一些好处，例如减少内存提高速度，以及提供选择框的选项来让用户选择。
3.常见问题
1、NG-OPTION表达式的写法
2、NG-CLASS-ODD和NG-CLASS-EVEN如何使用
4.解决方案
1、NG-OPTION表达式的写法
NG-OPTIONS的值可以是一个内涵表达式（COMPREHENSION EXPRESSION）， 其实这只是一种有趣的说法，简单来说就是它可以接收一个数组或者对象， 并对它们进行循环，将内部的内容提供给SELECT标签内部的选项。它可以是一下两种形式。
1、数组作为数据源
用数组中的值做标签。(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)
2、对象作为数据源
用对象的键-值（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-CLASS-ODD和NG-CLASS-EVEN如何使用
NG-CLASS-ODD 指令用于为 HTML 元素动态的绑定一个或多个 CSS 类，但只作用于奇数行。
NG-CLASS-EVEN 指令用于为 HTML 元素动态的绑定一个或多个 CSS 类，但只作用于偶数行。
需要与 NG-REPEAT 指令搭配使用。建议用在表格的样式渲染中，但是所有HTML元素都是支持的。
5.编码实战（略）
6.扩展思考
NG-IF的作用域问题
NG-IF指令会创建一个子级作用域，因此，如果在NG-IF指令中添加了元素， 并向元素属性增加 NG-MODEL指令，那么NG-MODEL指令对应的作用域属性 子级作用域，而并非控制器注入的$SCOPE作用域对象，这点在进行双向数 据绑定时，需要引起注意。
因此，解决NG-IF中NG-MODEL值无效的问题，主要方法就是在绑定值时添加$PARENT标识， 或者用NG-SHOW指令代替NG-IF指令，这两种方法都可以达到同样的页面效果。
写法如下：
NG-MODEL="$PARENT.INDUSTRY"
7.参考文献
参考一：菜鸟教程参考二：[ANGULARJS]NG-SELECT和NG-OPTIONS8.更多讨论
用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链接：https://ptteng.github.io/PPT/PPT/js-08-AngularJs%20common%20directive.html#/
视频链接：https://v.qq.com/x/page/h0519pqax2x.html
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
