ANGULAR JS 经常使用指令NG-IF、NG-CLASS、NG-OPTION、NG-VALUE、NG-CLICK是如何使用的？

你们好，我是IT修真院武汉分院第12期学员，一枚正直善良的web程序员。

今天给你们分享一下，修真院官网JS8任务中可能会使用到的知识点：

ANGULAR JS 经常使用指令NG-IF、NG-CLASS、NG-OPTION、NG-VALUE、NG-CLICK是如何使用的？

1.背景介绍
AngularJS 经过被称为"指令(directive)"的新属性来扩展 HTML。

AngularJS 有许多内置的指令来为应用添加功能

通俗点说就是 AngularJS 将指令与DOM绑定在一块儿，再扩展指令的行为，最后实现修改HTML的功能

AngularJS 的内置指令均有ng-前缀

2.知识剖析
2.1 经常使用属性之 ng-value

ng-value 指令用于设置 input 或 select 元素的 value 属性

ng-value 的格式：

这里有几个结论：

1.ng-value会赋值给value，而且优先于ng-model
2.ng-value不是双向绑定，不会由于value的值改变
能够把ng-value就当成一个能够用给input等元素的value赋值的属性

2.2 经常使用属性之 ng-if

ng-if 指令用于在表达式为 false 时移除 HTML 元素，在表达式为 true 时添加 HTML 元素

ng-if 的格式

这里区别于ng-show和ng-hide，ng-if会直接在DOM树中添加或者删除节点，而前面两个只会显示隐藏

2.3 经常使用属性之 ng-click

ng-click 指令告诉了 AngularJS HTML 元素被点击后须要执行的操做

ng-click 的格式

这里能够参考js的onclick

2.4 经常使用属性之 ng-options

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

这里能够对比ng-repeat的方法

2.5 经常使用属性之 ng-class

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

ng-class 指令的值能够是字符串，对象，或一个数组

3.常见问题
实例：ng-if会生成一个子做用域，在ng-if隐藏（不存在）时的做用域$scope在ng-if显示后，会搜索不到其子做用域，致使ng-model绑定不到ng-if新生成的子做用域内的值

很是见实例：uib-progressbar只能使用value而且能够使用表达式

4.解决方案
在大部分状况使用ng-show代替ng-if

或者能够使用ng-if可是同时须要将ng-model中的变量添加$parent来获取父级做用域

5.编码实战
这里看一下我在任务中的实例

6.拓展思考
1.什么状况下使用ng-if代替ng-show（转）

2.ng-click、ng-change、ng-dblclick、ng-checked该怎么选择（转）

7.参考文献
参考一：正确使用ng-if和ng-show

参考二：ng-model与ng-value的区别

参考三：菜鸟教程

参考四：ng-class用法

8.更多讨论
Q1:  ng-model何时能够不用？

A1:  ng-model在须要双向绑定时候使用

Q2:  ng-if会产生ng-model绑定得不到数据怎么办？

A2:  在ng-model的表达式前添加$parent.来获取父级做用域

Q3:  ng-options会有一个空置怎么解决？

A3:  为ng-model添加初始值

PPT：https://it-xzy.github.io/WEB-...

腾讯视频：https://v.qq.com/x/page/d0625...

今天的分享就到这里啦，欢迎你们点赞、转发、留言、拍砖~