内置指令
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。 |
| index”(索引)是偶数则为true，否则为false。 | ||
| 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>