10 内置指令

内置指令

ng-app

ng-app指令用于告诉 AngularJS 应用当前这个元素是根元素。

所有 AngularJS 应用都必须要有一个根元素。

HTML 文档中只允许有一个ng-app 指令，如果有多个ng-app指令，则只有第一个会被使用。

<element ng-app="modulename">
...
在 ng-app 根元素上的内容可以包含 AngularJS 代码
...
</element>

ng-controller

ng-controller 指令用于为你的应用添加控制器。

在控制器中，你可以编写代码，制作函数和变量，并使用scope对象来访问。

<div ng-app="myApp" ng-controller="myCtrl">
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>

ng-init

初始化应用时创建一个变量，并给变量赋值 ng-init 执行给定的表达式。

多个变量使用;分号隔开。

ng-init 指令添加一些不必要的逻辑到 scope 中，建议你可以在控制器中 ng-controller 指令执行它 。

<div ng-app="" ng-init="myText='Hello World!'">
<h1>{{myText}}</h1>

ng-model

ng-model指令把输入框的值绑定到变量 name 上； {{ name }} 表达式就是把应用程序变量 name 绑定到某个dom元素的innerHTML

请输入你的名字：<input type="text" id="username" ng-model="name">
你的名字是： <span>{{name}}</span>

ng-model-options

该指令允许调整如何让模型更新完毕。你可以使用这个指令去指定一系列哪些将会触发模型更新的事件/或者一个消除抖动的延迟，使实际的更新只发生在定时器到期的时候。在另一个变化发生后，定时器将会重置。

格式：ng-model-options="{updateOn:'default blur',debounce:{'default':500,'blur':0}}”

• updateOn: 指定事件应该是输入的字符串。你可以使用一个空格分隔的列表设置若干事件。有一个特殊的事件称为默认匹配的控制的默认事件。

• debounce: 一个规定多久模型执行更新的整数值。值为0的则触发即时更新。如果提供了一个对象，你可以为每个事件指定一个值。

<div ng-app="Demo" ng-controller="testCtrl as test">
<input ng-model="test.text" ng-model-options="{updateOn:'default focus',debounce:{'default':3000,'focus':5000}}" />
</div>

(function(){
angular.module("Demo",[])
.controller("testCtrl",["$scope",testCtrl]);
function testCtrl($scope){
$scope.$watch("test.text",function(n,o){ console.log(n,o); })
}
}());

这个指令可以用在输入延迟搜索的input中，就比如：做一个搜索框，用户输入的时候不进行搜索，当用户停止输入后N秒，再执行搜索，这样保证了不会输入变化的时候即时的去请求（这样会造成页面大量的XMLHttpRequest请求），但又实现了不用点击搜索按钮可自动执行搜索。

ng-bind/ng-non-bindable

ng-bind 指令将指定变量或表达式的值显示在元素的innerHTML。如果给定的变量或表达式修改了，指定元素的 innerHTML 也会修改。

<input type="text" ng-model="text"> --将文本框的值绑定到text变量
你输入的值是:<span ng-bind="text"></span> --动态显示text变量的值

ng-non-bindable指令用于告诉 AngularJS 当前的 HTML 元素或其子元素不需要编译。

<p ng-non-bindable>这个代码不需要使用 AngularJS: {{ 5+5 }}</p>

ng-href/ng-src

绑定元素的href或src地址.

ng-href 指令确保了链接是正常的，即使在 AngularJS 执行代码前点击链接。

ng-src指令确保 AngularJS 代码执行前不显示图片。

<div ng-init="imgSrc = 'http://www.runoob.com/wp-content/uploads/2014/06/angular.jpg';linkHref= 'http://www.angularjs.net.cn'">
<h1>Angular</h1>
<img ng-src="{{imgSrc}}">
<p>访问 <a ng-href="{{linkHref}}">{{linkHref}}</a> 学习!</p>
</div>

ng-if/ng-show/ng-hide

ng-if 值为true或flase 从DOM中添加和移除元素。

ng-show 值为true或flase 显示或隐藏元素.

ng-hide 值为true或flase 隐藏或显示元素

ng-if 指令不同于 ng-hide， ng-hide 隐藏元素，而 ng-if 是从 DOM 中移除元素。

ng-swich

<element ng-switch="expression">
<element ng-switch-when="value"></element>
<element ng-switch-when="value"></element>
<element ng-switch-when="value"></element>
<element ng-switch-default></element>
</element>

ng-switch 指令根据表达式显示或隐藏对应的部分。

ng-switch-when ="" 值为指定value值的时候 显示元素

ng-switch-default 没有匹配的value值时显示元素

ng-repeat

根据绑定数组成员的数量，复制被绑定的元素。ng-repeat指令为集合中的每项都实例化一个模块。每个模块都有自己的scope，给定的循环变量将被设置为当前项，$index是他们的索引。

在ng-repeat指令复制元素的过程中，还提供了几个专有变量：

变量	类型	描述
$index	number	当前索引。
$first	boolean	当循环的对象存在第一项时为true。
$middle	boolean	当循环的对象存在中间项时为true。
$last	boolean	当循环对象存在最后一项时为true。
$even | `boolean` | 循环的对象在当前位置的"$index”(索引)是偶数则为true，否则为false。
$odd | `boolean` | 循环的对象在当前位置的"$index”(索引)是奇数则为true，否则为false。

表达式实例规则:

x in records
(key, value) in myObj
x in records track by $id(x)

<table ng-controller="myCtrl" border="1">
<tr ng-repeat="(x, y) in myObj">
<td>{{x}}</td>
<td>{{y}}</td>
</tr>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.myObj = {
"Name" : "Alfreds Futterkiste",
"Country" : "Germany",
"City" : "Berlin"
}
});
</script>

track by 去除重复

ngRepeatStart和ngRepeatEnd 进行一块区域循环。

ng-style

ng-style 指令为 HTML 元素添加 style 属性。 ng-style 属性值必须是对象，表达式返回的也是对象.对象由 CSS 属性和值组成，即 key：value 。

ng-style="{color: 'white'}"

ng-class

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

ng-class 指令的值可以是字符串，对象，或一个数组。

如果是字符串，多个类名使用空格分隔。

如果是对象，需要使用 key-value 对， value是一个布尔值，key 为你想要添加的类名。只有在 value 为 true 时，类才会被添加。

如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。

1. 直接绑定值为CSS类名的$scope对象属性

<head>
<style>
.red {
color: red;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="listController">
<span ng-class="red1">曹总</span>
</div>
<script src="../../script/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("listController", function($scope) {
$scope.red1='red';
});
</script>
</body>

2. 通过key/value对象的方式添加多个CSS类(推荐)

ng-class="{style1:true,style2:false}"

<head>
<style>
.red {
color: red;
}
.green {
color: green;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="listController">
<ul>
<li ng-repeat = "item in datas"
ng-class="{red:item.startsWith('张'),green:!item.startsWith('张')}">{{ item }}
</li>
</ul>
</div>
<script src="../../script/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("listController", function($scope) {
$scope.datas = ["张三","李四","王五","赵六","张"];
});
</script>
</body>

3. 以字符串数组方式选择性添加CSS类

ng-class="{true: 'style1',false: 'style2'}[express]

<head>
<style>
.red {
color: red;
}
.green {
color: green;
}
</style>
</head>
<body>
<div ng-app ng-init="data={style1:true,style2:false}">
<!--ng-class指令会根据设置对象的情况决定是否添加某些class类名-->
<div ng-class="{true:'red',false:'green'}[data.style1]">红色</div>
<div ng-class="{true:'red',false:'green'}[data.style2]">绿色</div>
</div>
<script src="../../script/angular.min.js"></script>
</body>

ng-class-odd 绑定奇数行样式

ng-class-even 绑定偶数行样式

ng-include

ng-include 指令用于包含外部的 HTML 文件。

包含的内容将作为指定元素的子节点。

ng-include 属性的值可以是一个表达式，返回一个文件名。

默认情况下，包含的文件需要包含在同一个域名下。

<element ng-include="filename" onload="expression" autoscroll="expression" ></element>

ng-include 指令作为元素使用

<ng-include src="filename" onload="expression" autoscroll="expression" ></ng-include>

• src: 指定要加载内容的URL，src的值必须为表达式，如果filename是字符串，则必须添加单引号，即src="'app/test.html'"
• onload: 可选，指定一个在内容被加载时调用的表达式
• autoscroll:可选，指定内容在加载时是否滚动到这部分视图所在的区域

<div ng-include="'temp'" onload="value='5'" autoscroll="" ></div>
<script type="text/ng-template" id="temp">
<input ng-model="text" />{{value}}
</script>

注意:

• <script>标签的type是ng格式的 type="text/ng-template"
• 需要把<script>标签写在ng-app的范围内才能让angular顺利的将该模板存入模板缓存中，如果是在ng-app范围外，将会是undefined。

ng-transclude

这个指令用于标记使用嵌入式的指令中包含的DOM插入点。

<div ng-app="Demo" ng-controller="testCtrl as ctrl">
<input ng-model="ctrl.words" />
<my-div>{{ctrl.words}}</my-div>
</div>

(function () {
angular.module("Demo", [])
.directive("myDiv", myDiv)
.controller("testCtrl", testCtrl);
function myDiv(){
return {
restrict: 'E',
transclude: true,
template:"<div><p>ngTransclude:</p><p ng-transclude></p><p>End</p></div>"
}
};
function testCtrl() {
this.words = "Hello World";
};
}());

在指令中嵌入指令外的DOM元素，值得注意的是，就算这个指令创建了自己的子scope，这个DOM元素所在的scope也不是这个指令的scope，而是指令所在的scope。

与行为有关的指令

ng-click：Angular的点击事件处理器，给元素通过click事件绑定$scope对象的方法

<input type="text" ng-model="text"> <button ng-click="show()">显示输入值</button>

$scope.show = function(){ alert("您输入的内容是：" + $scope.text); }

常用的事件有：

指令	描述
ng-click	定义元素被点击时的行为
ng-dblclick	规定双击事件的行为
ng-copy	规定拷贝事件的行为
ng-paste	规定粘贴事件的行为
ng-cut	规定剪切事件的行为
ng-keydown	规定按下按键事件的行为
ng-keypress	规定按下按键事件的行为
ng-keyup	规定松开按键事件的行为
ng-mousedown	规定按下鼠标按键时的行为
ng-mouseenter	规定鼠标指针穿过元素时的行为
ng-mouseleave	规定鼠标指针离开元素时的行为
ng-mousemove	规定鼠标指针在指定的元素中移动时的行为
ng-mouseover	规定鼠标指针位于元素上方时的行为
ng-mouseup	规定当在元素上松开鼠标按钮时的行为
ng-focus	规定聚焦事件的行为
ng-cloak	在应用正要加载时防止其闪烁

与表单有关的指令

ng-value

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

<input ng-value="expression"></input>

<input> 和 <select> 元素支持该属性。

ng-list

ng-list 指令将字符串转换为数组，并使用逗号分隔。

<element ng-list="separator"></element>

<input>, <select>, <textarea>, 和其他可编辑元素支持该指令。

separator：可选,定义分隔符，默认为”, “

<p>在输入框中，输入一些文本，并使用逗号分隔它们：</p>
<input ng-model="customers" ng-list/>
<p>当使用 ng-list 指令时，你的输入信息会转换为数组，如下所示：</p>
<pre>{{customers}}</pre>

ng-readonly

ng-readonly 指令用于设置表单域(input 或 textarea) 的 readonly 属性。

如果 ng-readonly 属性的表达式返回 true，则表单域为只读。

<input ng-readonly="expression"></input>

ng-change

ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。

ng-change 指令需要搭配 ng-model 指令使用。

AngularJS ng-change 指令不会覆盖原生的 onchange 事件, 如果触发该事件，ng-change 表达式与原生的 onchange 事件都会执行。

ng-change 事件在值的每次改变时触发，它不需要等待一个完成的修改过程，或等待失去焦点的动作。

ng-change 事件只针对输入框的真实值修改，而不是通过 JavaScript 来修改。

<element ng-change="expression"></element>

<input>, <select>和<textarea> 元素支持。

<body ng-app="myApp">
<div ng-controller="myCtrl">
<input type="text" ng-change="myFunc()" ng-model="myValue" />
<p>The input field has changed {{count}} times.</p>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.count = 0;
$scope.myFunc = function() {
$scope.count++;
};
}]);
</script>
</body>

ng-checked

ng-checked 指令用于设置复选框(checkbox)或单选按钮(radio)的 checked 属性。

如果 ng-checked 属性返回 true，复选框(checkbox)或单选按钮(radio)将会被选中。

<input type="checkbox|radio" ng-checked="expression"></input>

选择一个或选择所有选项:

<body ng-app="">
<p>My:</p>
<input type="checkbox" ng-model="all"> Check all<br><br>

<input type="checkbox" ng-checked="all">Volvo<br>
<input type="checkbox" ng-checked="all">Ford<br>
<input type="checkbox" ng-checked="all">Mercedes
</body>

ng-options

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

ng-options 指令使用数组来填充下拉列表，多数情况下与 ng-repeat 指令一起使用。

<select ng-options="array expression"></select>

1. 绑定简单的数组数据

采用”… for … in …”格式将数组与<select>控件绑定。

<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="item for item in names"></select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});
</script>

2. 绑定简单的对象数据

采用”… as … for … in …”格式将对象与<select>控件绑定。

<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="item.id as item.name for item in data"></select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.data=[
{id:'1',name:'A'},
{id:'2',name:'B'},
{id:'3',name:'C'}
];
});
</script>

在设置<select>类型控件的“ng-options”属性时，“as”前面部分对应元素的value值，用于选中时获取，“as”后面部分对应元素的text值，用于直接显示。

3. 以分组的形式绑定对象数据

除直接绑定对象数据外，还可以将对象中的数据进行分组绑定显示。
采用”… as … group by … for … in …”格式，就可以实现对象按“key”分组绑定并显示的功能。

<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="item.id as item.name group by item.key for item in data"></select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.data=[
{id:'1',name:'A',key:'upper'},
{id:'2',name:'B',key:'upper'},
{id:'3',name:'c',key:'lower'},
{id:'4',name:'d',key:'lower'},
];
});
</script>

ng-selected

ng-selected 指令用于设置 <select> 列表中的 <option> 元素的 selected 属性。

ng-selected 属性的表达式返回 true，则选项被选中。

<option ng-selected="expression"></option>

点击复选框选择 BMW 选项:

<input type="checkbox" ng-model="mySel">
<p>我喜欢的车:</p>
<select>
<option>Volvo</option>
<option ng-selected="mySel">BMW</option>
<option>Ford</option>
</select>

ng-disabled

ng-disabled 指令设置表单输入字段的 disabled 属性(input, select, 或 textarea)。
如果 ng-disabled 中的表达式返回 true，则表单字段将被禁用。

禁用或启用输入框:

禁用表单输入域: <input type="checkbox" ng-model="all">
<br>
<input type="text" ng-disabled="all">
<input type="radio" ng-disabled="all">
<select ng-disabled="all">
<option>Female</option>
<option>Male</option>
</select>

ng-submit

ng-submit 指令用于在表单提交后执行指定函数。

<form ng-submit="expression"></form>