指令

扩展 html 的语法,所有的指令都带有 ng- 前缀

ng-app

初始化一个 angular 程序
<div ng-app="myApp">我是 angular 程序</div>
<script>
	angular.module('myApp', []);
</script>

ng-init

初始化 angular 程序里的部分默认数据
<div ng-app="myApp" ng-init="text='hello angular'">
	{{ text }}
</div>
<script>
	angular.module('myApp', []);
</script>

ng-controller

ng-controller 用于指定程序的业务逻辑。
在控制器里可以操作 angular 程序的视图,数据,逻辑。
控制器在 angular 里非常重要
<div ng-app="myApp">
	<p ng-controller="myAppCon">
		{{ text }}
	</p>
</div>
<script>
	angular.module('myApp', [])
		.controller('myAppCon', ['$scope', function($scope) {
			//  app 里的 text 做赋值操作
       		$scope.text = "我是 angular 程序";
     	}]);
</script>

ng-model

把一个元素的值绑定到 angular 程序中,以此来实现数据的双向绑定
<div ng-app="myApp" ng-init="text='hello angular'">
	<p>{{ text }}</p>
	<input type="text" class="form-control" placeholder="请输入" ng-model="text"/>
</div>
<script>
	angular.module('myApp', []);
</script>

ng-if

一个表达式,判断是否显示表达式下面的元素
当 ng-if 表达式结果为 true 时 dom 结构才会添加到页面中
<div ng-app="myApp" ng-init="state=true">
	<label>
		click me
		<input type="checkbox" ng-model="state"/>
	</label>
	<div ng-if="state">你选择了复选框</div>
</div>
<script>
	angular.module('myApp', []);
</script>

ng-else [ng-if]

angular.js 中没有 ng-else 指令,但是我们可以把 ng-if 的表达式反转以下
在 ng 指令中,填写的是一个简单的表达式,既然是表达式我们就可以把它当做逻辑来处理, 可以使用 ! 来对结果做 true false 转义
<div ng-app="myApp" ng-init="state=true">
	<label>
		click me
		<input type="checkbox" ng-model="state"/>
	</label>
	<div ng-if="state">你选择了复选框</div>
	<div ng-if="!state">你没有选择选中复选框</div>
</div>
<script>
	angular.module('myApp', []);
</script>

ng-show

与 ng-if 效果类似,不同的地方在于 ng-if 条件为 false 时是不会创建 dom 元素。
ng-show 不一样,它对元素的操作只有两个,display : block 与 display : noe 。
<div ng-app="myApp" ng-init="show=true">
	<label>
		click me
		<input type="checkbox" ng-model="show"/>
	</label>
	<div ng-show="show">你选择了复选框</div>
</div>
<script>
	angular.module('myApp', []);
</script>

ng-value

设置 input 或 select 元素的 value 属性, 多用于单选框
<div ng-app="myApp" ng-controller="myAppCon">
    <h2>请选择</h2>
    <label ng-repeat="name in names">
       {{ name }}
       <input type="radio" ng-model="my.favorite" ng-value="name" name="favorite">
    </label>
    <div>你的选择是  {{my.favorite}}</div>
</div>
<script>
   	angular.module('myApp', [])
    	.controller('myAppCon', ['$scope', function($scope) {
       		$scope.names = ['A', 'B', 'C'];
       		$scope.my = { favorite: 'A' };
     	}]);
</script>

ng-repeat

重复,循环 ng-repeat 使用的是类似 for in 的语法
<div ng-app="myApp" ng-controller="myAppCon">
	<p ng-repeat="item in items">
		{{ item }}
	</p>
</div>
<script>
	angular.module('myApp', []).
		controller('myAppCon',['$scope',function($scope){
			$scope.items = ["a","b","c","d"];
		}]);
</script>

$index [ng-repeat]

使用 ng-repeat 时描述当前循环的 下标
<p ng-repeat="item in items">
	{{ $index }} - {{ item }}
</p>

$first [ng-repeat]

使用 ng-repeat 时判断当前循环是否是第一个
<p ng-repeat="item in items">
	<span ng-if="$first">
		第一个 : {{ item }}
	</span>
	<span ng-if="!$first">
		{{ $index + 1 }}-{{ item }}
	</span>
</p>

$last [ng-repeat]

使用 ng-repeat 时判断当前循环是否是最后一个
<p ng-repeat="item in items">
	<span ng-if="!$last">
		{{ $index + 1 }}-{{ item }}
	</span>
	<span ng-if="$last">
		第后一个 : {{ item }}
	</span>
</p>

ng-repeat

在循环遍历一个数据时往往会遇到 array 与 object 格式,上面举例说的是数组,下面来看下如何循环对象
<div ng-app="myApp" ng-controller="myAppCon">
	<p ng-repeat="(key,item) in items">
		{{ key }} - {{ item }}
	</p>
</div>
<script>
	angular.module('myApp', []).
		controller('myAppCon',['$scope',function($scope){
			$scope.items = ["a","b","c","d"];
		}]);
</script>

ng-list

将一个数据分割成数组, 与 String.split() 类似, ng-list 中的值是分割的关键字

常用分隔符

符号 说明
&#010 以换行分隔
, 以英文逗号分隔
¦ 以竖线逗号分隔


<div ng-app="myApp" ng-controller="myAppCon">
	<textarea ng-model="list" ng-list="|"></textarea>
	<pre>{{ list | json }}</pre>
</div>
<script>
	angular.module('myApp', []).
		controller('myAppCon',['$scope',function($scope){
			$scope.list = ["a","b","c","d"];
		}]);
</script>

ng-trim

是否去除字符中开头与结尾的空格
<div ng-app="myApp" ng-controller="myAppCon">
	<input type="text" ng-model="text" ng-trim="true">
	<pre>{{ text }}</pre>
</div>
<script>
	angular.module('myApp', []);
</script>

ng-cloak

避免由 HTML 模板显示造成不良的闪烁效果
<div ng-app="myApp" ng-controller="myAppCon">
	<div class="ng-cloak">
		是否使用了复制组合键 {{ cutstate }}
	</div>
</div>
<script>
	angular.module('myApp', [])
		.controller('myAppCon',['$scope',function($scope){
		}]);
</script>

ng-src

用于设置带有 src 属性的标签,指在可以动态的修改 src 的值
假如 <img src="{{src}}" /> 这么设置,浏览器会先解析一次 src 的值,然后才是 angular 来设置,为了避免这样的情况请使用 ng-src
<div ng-app="myApp">
	<div ng-controller="myAppCon">
	 	<img ng-src="./{{src}}"/>
	</div>
</div>
<script>
	angular.module('myApp', [])
		.controller('myAppCon', ['$scope', function($scope) {
		  	$scope.src = "jscss.cc.ico";
		}]);
</script>