10 内置指令

ゝ一纸荒年。 2022-05-26 00:58 236阅读 0赞

# 内置指令 #

## 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的则触发即时更新。如果提供了一个对象，你可以为每个事件指定一个值。

(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 ##

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

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

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

## ng-repeat ##

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

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

<table> 
 <thead> 
  <tr> 
   <th>变量</th> 
   <th>类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$index</td> 
   <td><code>number</code></td> 
   <td>当前索引。</td> 
  </tr> 
  <tr> 
   <td>$first</td> 
   <td><code>boolean</code></td> 
   <td>当循环的对象存在第一项时为true。</td> 
  </tr> 
  <tr> 
   <td>$middle</td> 
   <td><code>boolean</code></td> 
   <td>当循环的对象存在中间项时为true。</td> 
  </tr> 
  <tr> 
   <td>$last</td> 
   <td><code>boolean</code></td> 
   <td>当循环对象存在最后一项时为true。</td> 
  </tr> 
  <tr> 
   <td><span style="color: inherit; display: none;"></span><span style="position: relative;"> <span style="width: 19.586em; display: inline-block;"><span style="display: inline-block; position: relative; width: 16.313em; height: 0px; font-size: 120%;"><span style="position: absolute; clip: rect(1.253em, 1016.19em, 2.622em, -999.997em); top: -2.199em; left: 0em;"><span><span style="font-family: MathJax_Math-italic;">e</span><span style="font-family: MathJax_Math-italic;">v</span><span style="font-family: MathJax_Math-italic;">e</span><span style="font-family: MathJax_Math-italic;">n</span><span><span><span style="font-family: MathJax_Main;">|</span></span></span><span style="font-family: MathJax_Main;">‘</span><span style="font-family: MathJax_Math-italic;">b</span><span style="font-family: MathJax_Math-italic;">o</span><span style="font-family: MathJax_Math-italic;">o</span><span style="font-family: MathJax_Math-italic;">l</span><span style="font-family: MathJax_Math-italic;">e</span><span style="font-family: MathJax_Math-italic;">a</span><span style="font-family: MathJax_Math-italic;">n</span><span style="font-family: MathJax_Main;">‘</span><span><span><span style="font-family: MathJax_Main;">|</span></span></span><span><span><span><span style="font-family: STIXGeneral, &quot;Arial Unicode MS&quot;, serif; font-size: 83%; font-style: normal; font-weight: normal;">循</span></span></span></span><span><span><span><span style="font-family: STIXGeneral, &quot;Arial Unicode MS&quot;, serif; font-size: 83%; font-style: normal; font-weight: normal;">环</span></span></span></span><span><span><span><span style="font-family: STIXGeneral, &quot;Arial Unicode MS&quot;, serif; font-size: 83%; font-style: normal; font-weight: normal;">的</span></span></span></span><span><span><span><span style="font-family: STIXGeneral, &quot;Arial Unicode MS&quot;, serif; font-size: 83%; font-style: normal; font-weight: normal;">对</span></span></span></span><span><span><span><span style="font-family: STIXGeneral, &quot;Arial Unicode MS&quot;, serif; font-size: 83%; font-style: normal; font-weight: normal;">象</span></span></span></span><span><span><span><span style="font-family: STIXGeneral, &quot;Arial Unicode MS&quot;, serif; font-size: 83%; font-style: normal; font-weight: normal;">在</span></span></span></span><span><span><span><span style="font-family: STIXGeneral, &quot;Arial Unicode MS&quot;, serif; font-size: 83%; font-style: normal; font-weight: normal;">当</span></span></span></span><span><span><span><span style="font-family: STIXGeneral, &quot;Arial Unicode MS&quot;, serif; font-size: 83%; font-style: normal; font-weight: normal;">前</span></span></span></span><span><span><span><span style="font-family: STIXGeneral, &quot;Arial Unicode MS&quot;, serif; font-size: 83%; font-style: normal; font-weight: normal;">位</span></span></span></span><span><span><span><span style="font-family: STIXGeneral, &quot;Arial Unicode MS&quot;, serif; font-size: 83%; font-style: normal; font-weight: normal;">置</span></span></span></span><span><span><span><span style="font-family: STIXGeneral, &quot;Arial Unicode MS&quot;, serif; font-size: 83%; font-style: normal; font-weight: normal;">的</span></span></span></span><span style="font-family: MathJax_Main; padding-left: 0.301em;">"</span></span><span style="display: inline-block; width: 0px; height: 2.205em;"></span></span></span><span style="display: inline-block; overflow: hidden; vertical-align: -0.354em; border-left: 0px solid; width: 0px; height: 1.432em;"></span></span> <span> e v e n | ‘ b o o l e a n ‘ | 循 环 的 对 象 在 当 前 位 置 的 " </span></span>index”(索引)是偶数则为true，否则为false。</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><span style="color: inherit; display: none;"></span><span style="position: relative;"> <span style="width: 19.051em; display: inline-block;"><span style="display: inline-block; position: relative; width: 15.836em; height: 0px; font-size: 120%;"><span style="position: absolute; clip: rect(1.253em, 1015.72em, 2.622em, -999.997em); top: -2.199em; left: 0em;"><span><span style="font-family: MathJax_Math-italic;">o</span><span style="font-family: MathJax_Math-italic;">d<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.003em;"></span></span><span style="font-family: MathJax_Math-italic;">d<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.003em;"></span></span><span><span><span style="font-family: MathJax_Main;">|</span></span></span><span style="font-family: MathJax_Main;">‘</span><span style="font-family: MathJax_Math-italic;">b</span><span style="font-family: MathJax_Math-italic;">o</span><span style="font-family: MathJax_Math-italic;">o</span><span style="font-family: MathJax_Math-italic;">l</span><span style="font-family: MathJax_Math-italic;">e</span><span style="font-family: MathJax_Math-italic;">a</span><span style="font-family: MathJax_Math-italic;">n</span><span style="font-family: MathJax_Main;">‘</span><span><span><span style="font-family: MathJax_Main;">|</span></span></span><span><span><span><span style="font-family: STIXGeneral, &quot;Arial Unicode MS&quot;, serif; font-size: 83%; font-style: normal; font-weight: normal;">循</span></span></span></span><span><span><span><span style="font-family: STIXGeneral, &quot;Arial Unicode MS&quot;, serif; font-size: 83%; font-style: normal; font-weight: normal;">环</span></span></span></span><span><span><span><span style="font-family: STIXGeneral, &quot;Arial Unicode MS&quot;, serif; font-size: 83%; font-style: normal; font-weight: normal;">的</span></span></span></span><span><span><span><span style="font-family: STIXGeneral, &quot;Arial Unicode MS&quot;, serif; font-size: 83%; font-style: normal; font-weight: normal;">对</span></span></span></span><span><span><span><span style="font-family: STIXGeneral, &quot;Arial Unicode MS&quot;, serif; font-size: 83%; font-style: normal; font-weight: normal;">象</span></span></span></span><span><span><span><span style="font-family: STIXGeneral, &quot;Arial Unicode MS&quot;, serif; font-size: 83%; font-style: normal; font-weight: normal;">在</span></span></span></span><span><span><span><span style="font-family: STIXGeneral, &quot;Arial Unicode MS&quot;, serif; font-size: 83%; font-style: normal; font-weight: normal;">当</span></span></span></span><span><span><span><span style="font-family: STIXGeneral, &quot;Arial Unicode MS&quot;, serif; font-size: 83%; font-style: normal; font-weight: normal;">前</span></span></span></span><span><span><span><span style="font-family: STIXGeneral, &quot;Arial Unicode MS&quot;, serif; font-size: 83%; font-style: normal; font-weight: normal;">位</span></span></span></span><span><span><span><span style="font-family: STIXGeneral, &quot;Arial Unicode MS&quot;, serif; font-size: 83%; font-style: normal; font-weight: normal;">置</span></span></span></span><span><span><span><span style="font-family: STIXGeneral, &quot;Arial Unicode MS&quot;, serif; font-size: 83%; font-style: normal; font-weight: normal;">的</span></span></span></span><span style="font-family: MathJax_Main; padding-left: 0.301em;">"</span></span><span style="display: inline-block; width: 0px; height: 2.205em;"></span></span></span><span style="display: inline-block; overflow: hidden; vertical-align: -0.354em; border-left: 0px solid; width: 0px; height: 1.432em;"></span></span> <span> o d d | ‘ b o o l e a n ‘ | 循 环 的 对 象 在 当 前 位 置 的 " </span></span>index”(索引)是奇数则为true，否则为false。</td> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

表达式实例规则:

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}">
    
    <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` 属性的值可以是一个表达式，返回一个文件名。

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

`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>

在指令中嵌入指令外的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); }

常用的事件有：

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

## 与表单有关的指令 ##

### 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>`