大家好，我是IT修真院武汉分院第13期学员，一枚正直善良的web程序员。
今天给大家分享一下：
angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？
AngularJS ng-if 指令
AngularJS 实例
取消选中，并移除内容:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="">
保留 HTML: <input type="checkbox" ng-model="myVar" ng-init="myVar = true">
<div ng-if="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
<hr>
</div>
<p>当复选框取消选中时 DIV 元素将移除。</p>
<p>当重新选中复选框，DIV 元素会重新显示。</p>
</body>
</html>
|
定义和用法
ng-if 指令用于在表达式为 false 时移除 HTML 元素。
如果 if 语句执行的结果为 true，会添加移除元素，并显示。
ng-if 指令不同于 ng-hide， ng-hide 隐藏元素，而 ng-if 是从 DOM 中移除元素。
语法
<element ng-if="expression"></element>
所有的 HTML 元素都支持该指令。
NG-OPTION
ng-options 指令用于使用options填充select元素的选项。
ng-options属性可以在表达式中使用数组或对象来自动生成一个select中的option列表。 ng-options与ng-repeat很相似，很多时候可以用ng-repeat来代替ng-options。 但是ng-options提供了一些好处，例如减少内存提高速度，以及提供选择框的选项来让用户选择。
ng-class
通过字符串数组的形式来改变
实现方式：
- function changeClass(){
- $scope.className = true/false;
- }
- <div ng-class="{true:‘zhende‘,false:‘jiade‘}[className]"></div>
实现很简单，就是当className为真的时候class为zhende，相反则为jiade。
但是有一点不好的只能够让一个元素拥有两种状态，虽然这么说！基本也是满足所需了，我一般都用这个。简单、直观！
NG-VALUE
ng-value 指令用于设置 input 或 select 元素的 value 属性。和value相比，它的值可以是表达式，所以相比之下可以实现更多需求。
比如当需要使用ng-repeat来动态生成input[]的时候，ngValue是很有用处的。
AngularJS也有自己的HTML事件指令,比如说通过ng-click定义一个AngularJS单击事件。
对按钮、链接等，我们都可以用ng-click指令属性来实现绑定，如下简单示例：
<div ng-app="" ng-init="click=false">
<button ng-click="click= !click">隐藏/显示</button>
<div ng-hide="click">
请输入一个名字：<input type="text" ng-model="name">
Hello <span ng-bind="name"></span>
</div>
</div>PS：ng-hide="true"，设置HTML元素不可见。
ng-click指令将DOM元素的鼠标点击事件(即mousedown)绑定到一个方法上，当浏览器在该DOM元素上鼠标触发点击事件时，Angular就会调用相应的方法
三个问题：
Q：ng-click可以定义多个点击事件吗?
A：可以的，直接在ng-click 指令后面添加多个点击的函数名，在js文件中不同的函数名写不同的函数事件
Q: ng-option怎么才能取消默认的空白?
A: 解决方法 在select里加入 <option value="">请选择</option>
Q: ng-class有什么优点?
A: 主要是可以动态的添加或者删除class,比用JS操作起来方便很多.
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
技能树-IT修真院
IT修真院是一个免费的线上IT技术学习平台 。
每个职业以15个左右的task为初学者提供更快速高效的学习方式 ；
所有task均是从真实项目中提炼出来的技能点，
强调实战演练+自学优先+师兄辅导的学习方式，
严格的日报体系，欢乐的交流讨论学习气氛，更有无数师兄师姐帮你解疑
扫一扫
7939
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
