Angular 中常用指令理解

1. ng-change

input 等html元素 有改變的時候的調(diào)用

2. ng-model

ng-model 指令用于綁定應用程序數(shù)據(jù)到 HTML 控制器(input, select, textarea)的值。 相當于綁定 input 綁定中的 值
備注：后面可以接變量 ，也可以接表達式

3. ng-options

點擊下拉列表
使用數(shù)組元素填充下拉列表:
備注：
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 元素的內(nèi)容。
如果給定的變量或表達式修改了，指定替換的 HTML 元素也會修改。
備注：可以綁定的內(nèi)容有很多
a. 變量

  <span ng-bind="year.year"></span>

b. 函數(shù)，以及表達式

  <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 + '調(diào)休'"></div>

5. ng-repeat

ng-repeat 指令用于循環(huán)輸出指定次數(shù)的 HTML 元素。
集合必須是數(shù)組或?qū)ο?br> 其實就是 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>

備注：如 代碼中顯示的 在 下級的 div 中，循環(huán)的內(nèi)容是繼續(xù)可以在使用的，下級中可以繼續(xù)使用 item $index 表示當前obj在數(shù)組中的 位置
擴展：關于在 數(shù)組中先 刷選出 一部分符合條件的數(shù)組，然后再進行循環(huán)====> 可以在后面加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.在鼠標指針穿過元素時執(zhí)行表達式：
b.ng-mouseenter 指令不會覆蓋元素的原生 onmouseenter 事件, 事件觸發(fā)時，ng-mouseenter 表達式與原生的 onmouseenter 事件將都會執(zhí)行。
備注：可以是控制一個表達式，也可以是改變一個變量的值，從而發(fā)生一系列相應的變化

  <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

初始化應用時創(chuàng)建一個變量

<div ng-app="" ng-init="myText='Hello World!'">

<h1>{{myText}}</h1>

10.ng-class

ng-class 指令用于給 HTML 元素動態(tài)綁定一個或多個 CSS 類。
指令的值可以是字符串，對象，或一個數(shù)組。
a.函數(shù)

 <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.可以返回數(shù)組（以字符串的形式拼接）

 <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="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 語句執(zhí)行的結果為 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 的區(qū)別
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)時執(zhí)行表達式:

<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>
最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容