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...

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