ANGULAR JS 常用指令NG-IF、NG-CLASS、NG

大家好，我是IT修真院成都分院第7期的学员韩建名，一枚正直纯洁善良的WEB前端程序员。

今天给大家带来的是：angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？

目录

1.背景介绍

2.知识剖析

3.常见问题

4.编码实战

5.扩展思考

6.参考文献

1.背景介绍

指令是一个Dom元素上的标签(和元素上的属性, CSS类样式一样，属于这个Dom元素)，它告诉AngualrJS的HTML编译器，去附加一个行为到这个Dom元素上去，这个行为可以改变这个Dom元素，或者这个Dom元素的子元素。AngularJS通过被称为 指令 的新属性来扩展HTML。AngularJS通过内置的指令来为应用添加功能。AngularJS内置指令是扩展的HTML属性，带有前缀ng-。

Angular有许多指令，今天我们主要来从ng-if、ng-class、ng-option、ng-value、ng-click这几个指令入手。

2.知识剖析

(1)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元素。 语法所有的 HTML 元素都支持该指令。

保留 HTML:

Welcome

Welcome to my home.

当复选框取消选中时 DIV 元素将移除。

当重新选中复选框，DIV 元素会重新显示。

(2)ng-class

ng-class指令用于给HTML元素动态绑定一个或多个CSS类。ng-class指令的值可以是字符串，对象，或一个数组。如果是字符串，多个类名使用空格分隔。如果是对象，需要使用key-value对，key为你想要添加的类名，value是一个布尔值。只有在value为true时类才会被添加。如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。

有三种方式：

第一种：通过数据的双向绑定（不推荐）

第二种：通过对象数组

第三种：通过key/value

第一种

function changeClass(){                        $scope.className = "change2";                    }

第二种

function changeClass(){                        $scope.className = true/false;                    }

实现很简单，就是当className为真的时候class为zhende，相反则为jiade。但是有一点不好的只能够让一个元素拥有两种状态，虽然这么说,基本也是满足所需了

第三种

function changeClass(){                    $scope.lala = true;                }

当lala为true的时候，class则为haha，个人认为这个是比较推荐的，可以弥补第二种方式的点点遗憾~

(3)ng-option

ng-options指令用于使用options填充select元素的选项。ng-options属性可以在表达式中使用数组或对象来自动生成一个select中的option列表。ng-options与ng-repeat很相似，很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处，例如减少内存提高速度，以及提供选择框的选项来让用户选择。

传送门

(4)ng-value

ng-value指令用于设置input或select元素的value属性。和value相比，它的值可以是表达式，所以相比之下可以实现更多需求。比如当需要使用ng-repeat来动态生成input[]的时候，ngValue是很有用处的。

(5)ng-click

ng-click指令告诉了AngularJS HTML元素被点击后需要执行的操作。如果是使用ng-click来实现函数的执行的话，还可以进行传参。一个ng-click可以触发多个操作，

先执行function1后执行function2

3.常见问题

ng-option表达式的写法

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)

4.编码实战

Demo

5.拓展思考

ng-if的作用域问题ng-if指令会创建一个子级作用域，因此，如果在ng-if指令中添加了元素，并向元素属性增加ng-model指令，那么ng-model指令对应的作用域属性子级作用域，而并非控制器注入的$scope作用域对象，这点在进行双向数据绑定时，需要引起注意。因此，解决ng-if中ng-model值无效的问题，主要方法就是在绑定值时添加$parent标识，或者用ng-show指令代替ng-if指令，这两种方法都可以达到同样的页面效果。 写法如下： ng-model="$parent.industry"

6.参考文献

菜鸟教程

AngularJS中的指令全面解析(必看)

PPT链接

ANGULAR JS 常用指令_腾讯视频