大家好，我是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-NEW/1025-js-08.html#/
腾讯视频：https://v.qq.com/x/page/d0625ifp7qr.html?
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
技能树-IT修真院
IT修真院是一个免费的线上IT技术学习平台 。
每个职业以15个左右的task为初学者提供更快速高效的学习方式 ；
所有task均是从真实项目中提炼出来的技能点，
强调实战演练+自学优先+师兄辅导的学习方式，
严格的日报体系，欢乐的交流讨论学习气氛，更有无数师兄师姐帮你解疑！