1. ng-change
input 等html元素 有改变的时候的调用
2. ng-model
ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。 相当于绑定 input 绑定中的 值
备注：后面可以接变量 ，也可以接表达式
3. ng-options
点击下拉列表
使用数组元素填充下拉列表:
备注：
item as item.compText 显示的时候是显示 item.compText 字段
<select ng-change="changeComp();" ng-model="comp" ng-options="item as item.compText for item in comps"></select>
4. ng-bind
指令告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。
如果给定的变量或表达式修改了，指定替换的 HTML 元素也会修改。
备注：可以绑定的内容有很多
a. 变量
<span ng-bind="year.year"></span>
b. 函数，以及表达式
<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> 未被渲染的模板可能会被用户看到
<p ng-bind="text"></p>
d.变量加固定的值，就是以字符串拼接
<div class="title-div" ng-bind="employeeInfo.empName + '调休'"></div>
5. ng-repeat
ng-repeat 指令用于循环输出指定次数的 HTML 元素。
集合必须是数组或对象
其实就是 for 循环
<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>
备注：如 代码中显示的 在 下级的 div 中，循环的内容是继续可以在使用的，下级中可以继续使用 item $index 表示当前obj在数组中的 位置
扩展：关于在 数组中先 刷选出 一部分符合条件的数组，然后再进行循环====> 可以在后面加filter，但是要避免$index 的bug
参看下面的一篇文章
http://blog.csdn.net/renfufei/article/details/43061877
6.ng-style (还需要具体再看)
添加样式
使用AngularJS添加样式，使用 CSS key=>value 对象格式:
<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.在鼠标指针穿过元素时执行表达式：
b.ng-mouseenter 指令不会覆盖元素的原生 onmouseenter 事件, 事件触发时，ng-mouseenter 表达式与原生的 onmouseenter 事件将都会执行。
备注：可以是控制一个表达式，也可以是改变一个变量的值，从而发生一系列相应的变化
<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
初始化应用时创建一个变量
<div ng-app="" ng-init="myText='Hello World!'">
<h1>{{myText}}</h1>
10.ng-class
ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。
指令的值可以是字符串，对象，或一个数组。
a.函数
<div ng-class="dayCSS(day);" ng-repeat="day in datePicker" ng-click="chooseDate(day, $index);">
b.表达式
<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.可以返回数组（以字符串的形式拼接）
<div ng-class="interval == 60 ? 'interval chose' : 'interval'" ng-click="switchInterval(60);">60分钟</div>
f.可以是一个对象
<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 指令在表达式为 true 时显示指定的 HTML 元素，否则隐藏指定的 HTML 元素
注意是隐藏，不是移除
<img ng-show="timeUnit.chose" class="img-check" src="//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 语句执行的结果为 true，会添加移除元素，并显示。
注意是移除
<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 的区别
http://m.blog.csdn.net/article/details?id=44701769
13.ng-click
添加点击事件（可以给任何一个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
当输入框失去焦点(onblur)时执行表达式:
<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>
网友评论