1. ng-change
input 等html元素 有改變的時(shí)候的調(diào)用
2. ng-model
ng-model 指令用于綁定應(yīng)用程序數(shù)據(jù)到 HTML 控制器(input, select, textarea)的值遂跟。 相當(dāng)于綁定 input 綁定中的 值
備注：后面可以接變量 览绿，也可以接表達(dá)式
3. ng-options
點(diǎn)擊下拉列表
使用數(shù)組元素填充下拉列表:
備注：
item as item.compText 顯示的時(shí)候是顯示 item.compText 字段
<select ng-change="changeComp();" ng-model="comp" ng-options="item as item.compText for item in comps"></select>
4. ng-bind
指令告訴 AngularJS 使用給定的變量或表達(dá)式的值來替換 HTML 元素的內(nèi)容。
如果給定的變量或表達(dá)式修改了，指定替換的 HTML 元素也會(huì)修改遵绰。
備注：可以綁定的內(nèi)容有很多
a. 變量
<span ng-bind="year.year"></span>
b. 函數(shù)，以及表達(dá)式
<div class="date-picker" ng-click="datePlugin();" ng-bind="pickerResult();">2016-08-15 星期一</div>
c.多次filter增淹，就是多次過濾
<span ng-bind="yearPicker[yearIndex].year"></span>年<span ng-bind="monthIndex | parseMonth"></span>月
與{{}}意義差不多椿访，但是推薦使用 ng-bind
<p>{{text}}</p> 未被渲染的模板可能會(huì)被用戶看到
<p ng-bind="text"></p>
d.變量加固定的值，就是以字符串拼接
<div class="title-div" ng-bind="employeeInfo.empName + '調(diào)休'"></div>
5. ng-repeat
ng-repeat 指令用于循環(huán)輸出指定次數(shù)的 HTML 元素虑润。
集合必須是數(shù)組或?qū)ο?br>
其實(shí)就是 for 循環(huán)
<div class="body-class" ng-repeat="item in bodyClasses">
<div ng-class="bodyClassChoseIndex == $index ? 'selected' : ''" ng-bind="item.name" ng-click="selectBodyClass($index);"></div>
</div>
<div class="clear"></div>
</div>
備注：如 代碼中顯示的 在 下級(jí)的 div 中成玫，循環(huán)的內(nèi)容是繼續(xù)可以在使用的，下級(jí)中可以繼續(xù)使用 item $index 表示當(dāng)前obj在數(shù)組中的 位置
擴(kuò)展：關(guān)于在 數(shù)組中先 刷選出 一部分符合條件的數(shù)組端辱，然后再進(jìn)行循環(huán)====> 可以在后面加filter，但是要避免$index 的bug
參看下面的一篇文章
http://blog.csdn.net/renfufei/article/details/43061877
6.ng-style (還需要具體再看)
添加樣式
使用AngularJS添加樣式虽画，使用 CSS key=>value 對(duì)象格式:
<div class="reserve-tooltip-arrow" ng-style="timeUnit | tooltipArrowStyle:times.length:$parent.$index:employeeReserves.length"></div>
<div ng-style="employeesChose | employeesChoseWrapper">
<div class="boxes" ng-style="pending.timeUnit.reserves | listWidth:1">
<h1 ng-style="myObj">菜鳥教程</h1>
<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-style="myObj">菜鳥教程</h1>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.myObj = {
"color" : "white",
"background-color" : "coral",
"font-size" : "60px",
"padding" : "50px"
}
});
</script>
</body>
7.ng-mouseenter
a.在鼠標(biāo)指針穿過元素時(shí)執(zhí)行表達(dá)式：
b.ng-mouseenter 指令不會(huì)覆蓋元素的原生 onmouseenter 事件, 事件觸發(fā)時(shí)舞蔽，ng-mouseenter 表達(dá)式與原生的 onmouseenter 事件將都會(huì)執(zhí)行。
備注：可以是控制一個(gè)表達(dá)式码撰，也可以是改變一個(gè)變量的值渗柿，從而發(fā)生一系列相應(yīng)的變化
<td ng-class="timeUnit | unitClass" ng-repeat="timeUnit in employee.timeUnits" ng-style="timeUnit | unitWidth" ng-click="timeUnitClickHandler(employee, timeUnit, $index);" ng-mouseenter="timeUnit.showTip = true;" ng-mouseleave="timeUnit.showTip = false;">
8.ng-src
ng-src 指令覆蓋了 img 元素的 src 屬性。
就是綁定 img 的鏈接src
<img ng-src="{{item.designerAvatar | formatImg:180:200:'http://static.bokao2o.com/noimg.png'}}"/>
9.ng-init
初始化應(yīng)用時(shí)創(chuàng)建一個(gè)變量
<div ng-app="" ng-init="myText='Hello World!'">
<h1>{{myText}}</h1>
10.ng-class
ng-class 指令用于給 HTML 元素動(dòng)態(tài)綁定一個(gè)或多個(gè) CSS 類脖岛。
指令的值可以是字符串朵栖，對(duì)象，或一個(gè)數(shù)組柴梆。
a.函數(shù)
<div ng-class="dayCSS(day);" ng-repeat="day in datePicker" ng-click="chooseDate(day, $index);">
b.表達(dá)式
<div ng-class="refreshEnable ? 'caption-button refresh' : 'caption-button disable'" ng-click="refresh();">
<div ng-class=" currentItem.isJob && !currentItem.empAssigned ? 'box-item select-field' : 'box-item'">
c.filter
<td ng-class="timeUnit | unitClass" ng-repeat="timeUnit in employee.timeUnits" ng-style="timeUnit | unitWidth" ng-click="timeUnitClickHandler(employee, timeUnit, $index);" ng-mouseenter="timeUnit.showTip = true;" ng-mouseleave="timeUnit.showTip = false;">
d.字符串拼接
<td ng-class="'unit' + (timeUnit.hasReserve ? ' before' : '')" ng-repeat="timeUnit in employee.timeUnits" ng-click="timeUnitClickHandler(employee, timeUnit, $index);">
e.可以返回?cái)?shù)組（以字符串的形式拼接）
<div ng-class="interval == 60 ? 'interval chose' : 'interval'" ng-click="switchInterval(60);">60分鐘</div>
f.可以是一個(gè)對(duì)象
<li ng-repeat="time in times" ng-bind="time" class="daysList-div" ng-class="{'1':'select-div','0':'normal-div','2':'unable-div'}[queryIncludeEmp(time)]" ng-click="selectDays(time,$index)"></li>
11. ng-show
ng-show 指令在表達(dá)式為 true 時(shí)顯示指定的 HTML 元素陨溅，否則隱藏指定的 HTML 元素
注意是隱藏，不是移除
<img ng-show="timeUnit.chose" class="img-check" src="http://static.bokao2o.com/images/managerAdmin/managerAdmin_joinBg.png"/>
<div ng-show="timeUnit.hasReserve && timeUnit.reserve.status != 2 && timeUnit.showTip" class="reserve-tooltip" ng-style="timeUnit | tooltipStyle:times.length:$parent.$index:employeeReserves.length">
12. ng-if
如果 if 語(yǔ)句執(zhí)行的結(jié)果為 true绍在，會(huì)添加移除元素门扇，并顯示。
注意是移除
<div ng-if="currentItem.isEmployee || (currentItem.isJob && currentItem.empAssigned)" class="value" ng-bind="currentItem.empName"></div>
<div ng-if="currentItem" class="value" ng-bind="currentItem.jobTitle"></div>
ng-if 與 ng-show 的區(qū)別
http://m.blog.csdn.net/article/details?id=44701769
13.ng-click
添加點(diǎn)擊事件（可以給任何一個(gè)div）
<div class="button confirm" ng-click="seeReserveConfirm();" ng-bind="(currentItem.isJob && !currentItem.empAssigned) ? '員工分配' : '客戶到店'"></div>
<button ng-click="count = count + 1" ng-init="count=0">OK</button>
好的用法
<div class="arrow up" ng-click="changeSort(-1);"></div>
<div class="arrow down" ng-click="changeSort(1);"></div>
14.ng-blur
當(dāng)輸入框失去焦點(diǎn)(onblur)時(shí)執(zhí)行表達(dá)式:
<input ng-blur="count = count + 1" ng-init="count=0" />
<h1>{{count}}</h1>
<div class="value"><input type="tel" placeholder="例如：13838388888" ng-model="userMobile" ng-blur="loadUserInfo();"/></div>
