ng-repeat指令
ng-repeat指令的作用：
遍歷集合
通過in的方式遍歷每一項。類似vue.js中的v-for
callee 是 arguments 對象的一個屬性。它可以用於引用該函數的函數體內當前正在執行的函數。這在函數的名稱是未知時很有用，例如在沒有名稱的函數表達式 (也稱爲“匿名函數”)內； 返回正被執行的 Function 對象，也就是所指定的 Function 對象的正文； arguments.length是實參長度，arguments.callee.length是形參長度； 在ES5嚴格模式中，禁止使用arguments.callee：這意味着，你無法在匿名函數內部調用自身了。<pre> <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script> <script type="text/javascript"> var app=angular.module("app",[]); app.controller("Aaa",["$scope","$filter",function($scope,$filter){ /* $scope.dataList=["aa","bb","cc"];*/ $scope.originList=[ {color:"red",age:"26"}, {color:"green",age:"25"}, {color:"yellow",age:"16"}, {color:"blue",age:"30"} ]; $scope.userList= $scope.originList; $scope.fnSort=function(arg){ //在當前函數對象上設置排序方式開關，第一次點擊從大到小，第二次點擊從小到大 arguments.callee['fnSort'+arg]=!arguments.callee['fnSort'+arg]; $scope.userList=$filter("orderBy")( $scope.originList,arg,arguments.callee['fnSort'+arg]); }; $scope.fnSearch=function(){ $scope.userList= $filter("filter")($scope.originList,$scope.keyword); } }]); </script> </head> <body> <div ng-controller="Aaa"> <input type="text" ng-model="keyword"><input type="button" value="搜索" ng-click="fnSearch()"> <table> <tbody> <tr> <th ng-click="fnSort('color')">姓名</th> <th ng-click="fnSort('age')">年齡</th> </tr> <tr ng-repeat="data in userList"> <td>{{data.color}}</td> <td>{{data.age}}</td> </tr> </tbody> </table> </div> </body> </html> </pre>"use strict";
var f = function() { return arguments.callee; }; f(); // 報錯np-repeat指令的擴展
- $index 每一項索引
- $first
<li ng-repeat=" data in dataList">{{$first}}</li>，除了第一項爲true，其餘項爲false。 last，與 first相反- $middle
<li ng-repeat=" data in dataList">{{$first}}</li>，除了第一項和最後一項爲false，其餘項爲true。 even和 odd
<li class="{{$even ? 'acive': 'normal'}}" ng-repeat=" data in dataList">{{data}}</li>，實現隔行變色ng-repeat-start和ng-repeat-end
當想要重複的html結構不是包含關係，而是兄弟關係，可採用此種輔助方式。<pre> <div ng-repeat-start=" data in dataList">{{data}}+1</div> <p>{{data}}+2</p> <div ng-repeat-end>{{data}}+3</div> </pre>
事件指令
與原生事件相比，支持表達式和數據變量。
- ng-click/dbclick
- ng-mousedown/up
- ng-mousemove/over/out
- ng-keydown/up/press
- ng-focus/blur
- ng-submit
- ng-selected 下拉菜單被選中的時候，觸發此事件
- ng-change 輸入框內的值只要一變化，就會觸發此事件
注意：ng-change必須和ng-model一起使用纔會起作用。
<input type="type" ng-change="bb='hello' ng-model="bb" >{{bb}}
ng-change指令內也可以寫函數。
- ng-cut/copy/paste
當我們在輸入框中進行剪切、複製、黏貼操作，就會觸發相應的指令。
input相關指令
- ng-disabled 可動態設置表單控件的狀態
- ng-readonly
readonly與disabled的區別：
readonly只能用於輸入框（text、textarea）,對於按鈕是不起作用的;
輸入框設置了readonly屬性還是可以提交，但是設置了disabled屬性就不可以。 - ng-checked 用於checkbox
- ng-value 針對表單控件的value
<input type="text" ng-value="val">，效果類似於：<input type="text" value="{{val}}">。
選擇用ng-vaule會更好一些，原因在於：
當瀏覽器運行時，是先解析html代碼，再執行JS代碼，如果用戶的網速比較慢，那麼瀏覽器解析JS代碼也可能會比較慢，用戶很有可能會看到“{{val}}”這樣的內容，所以會導致用戶體驗性不好，用ng-value就不會出現這個問題。
數據顯示優化處理及插件簡介
- ng-bind
爲了解決在html標籤中，直接使用“{{html}}”可能會出現與上文相同的問題，改用ng-bind。
<div>{{html}}</div>,改用<div ng-bind="html"></div>。
ng-bind只能寫一個表達式。如果想寫多個表達式，可用ng-bind-template指令 - ng-bind-template
<div ng-bind-template="{{html}}，{{html}}"></div> ng-bind-html
支持變量的值含有html標籤，即能夠識別html標籤，而ng-bind和ng-bind-template不能，會把html標籤當成普通字符串。
由於一般都是處理純數據很少有需求是要帶html標籤，ng-bind-html用的比較少，angular就把這一塊單獨提取出來形成插件，而沒有像那些通用的指令存放在angular庫中
http://www.bootcdn.cn/angular.js/，可以有免費的CDN提供插件下載。<pre> //解析html的插件 <script src="js/angular.min.js"></script> <script src="https://cdn.bootcss.com/angular.js/1.6.0/angular-sanitize.js"></script> <script> //它既是一個插件也是一個模塊，所以引用它，就需要依賴這個模塊 var m1=angular.nodule("app",['ngSanitize']); m1.controller("Aaa",['$scope',function($scope){ $scope.text='<h1>hello</h1>'; }]); </script> <body> <div ng-controller="Aaa"> <div ng-bind-html="text"></div> </div> </body> </pre>
-ng-cloak
用來控制css的一種方式
<div ng-cloak>{{text}}</div>,加上cloak指令後，這個div標籤的display爲none隱藏,當表達式解析完成後，就讓這個div標籤的display爲block顯示出來。
- ng-non-bindable
用來使表達式不被解析。
<div ng-non-bindable>{{text}}</div>,運行結果就是“{{text}}”表達式沒有被解析。
