ngList
在文本輸入的分隔的字符串和字符串數組間做轉換,可以是一個固定的字符串分隔符(默認逗號)或正則表達式。
格式:ng-list=”value”
value:表達式 通過這個值分隔字符串。
使用代碼:
<div ng-app="Demo" ng-controller="testCtrl as ctrl"> <input ng-model="ctrl.list" ng-list="."> {{ctrl.list}} </div>
(function () { angular.module("Demo", []) .controller("testCtrl", testCtrl); function testCtrl() { this.list = ["a", "b", "c"]; }; }());
在運行完上面的使用代碼后,你會發現,用ng做添加tags標簽將會變的異常的簡便,你只需要在input上綁個ngList,然后按你指定的分隔規則輸入tags即可,在js里對應的model就將會獲得這一串數組(比如<input ng-list=“-” ng-model="list" />,那么你在input里輸入"q-w-e-r-t-y-u",在js里對應的$scope.list就會是
["q","w","e","r","t","y","u"])。
ngRepeat
該指令為集合中的每項都實例化一個模塊。每個模塊都有自己的scope,給定的循環變量將被設置為當前項,$index是他們的索引。
格式:ng-repeat=“value”
value:被循環的數組。
$index:當前索引。
$first:當循環的對象存在第一項時為true。
$middle:當循環的對象存在中間項時為true。
$last:當循環對象存在最后一項時為true。
$even:循環的對象在當前位置的"$index"(索引)是偶數則為true,否則為false。
$odd:循環的對象在當前位置的"$index"(索引)是奇數則為true,否則為false。
使用代碼:
<div ng-app="Demo" ng-controller="testCtrl as ctrl"> <ol> <li ng-repeat="i in ctrl.list">{{i}}</li> </ol> </div>
(function () { angular.module("Demo", []) .controller("testCtrl", testCtrl); function testCtrl() { this.list = ["a", "b", "c"]; }; }());
使用小技巧 :
track by 去除重復
ngRepeatStart和ngRepeatEnd 進行一塊區域循環。
用過jquery的小伙伴自從用上了ngRepeat,會覺得好爽,再也不用循環一個數組然后給DOM append HTML字符串或者html()一大串拼接的HTML字符串去生成列表了。ngRepeat會根據數組去循環生成對應的DOM列表。不過需要注意的是,ngRepeat會創建了一個子scope,它使用原型繼承的方式從父級繼承下來。
ngModelOptions
該指令允許調整如何讓模型更新完畢。你可以使用這個指令去指定一系列哪些將會觸發模型更新的事件/或者一個消除抖動的延遲,使實際的更新只發生在定時器到期的時候。在另一個變化發生后,定時器將會重置。
格式:ng-model-options=”{updateOn:’default blur’,debounce:{‘default’:500,’blur’:0}}”
updateOn: 指定事件應該是輸入的字符串。你可以使用一個空格分隔的列表設置若干事件。有一個特殊的事件稱為默認匹配的控制的默認事件。
debounce: 一個規定多久模型執行更新的整數值。值為0的則觸發即時更新。如果提供了一個對象,你可以為每個事件指定一個值。
使用代碼:
<input ng-model="text" ng-model-options="{updateOn:'default blur',debounce:{'default':3000,'blur':5000}}" />
使用代碼:
<div ng-app="Demo" ng-controller="testCtrl as test"> <input ng-model="test.text" ng-model-options="{updateOn:'default focus',debounce:{'default':3000,'focus':5000}}" /> </div>
(function(){ angular.module("Demo",[]) .controller("testCtrl",["$scope",testCtrl]); function testCtrl($scope){ $scope.$watch("test.text",function(n,o){ console.log(n,o); }) } }());
這個指令可以用在輸入延時搜索的input中,就比如:做一個搜索框,用戶輸入的時候不進行搜索,當用戶停止輸入后N秒,再執行搜索,這樣保證了不會輸入變化的時候及時的去請求(這樣會造成頁面大量的XMLHttpRequest請求),但又實現了不用點擊搜索按鈕可自動執行搜索。當然,這個指令用在別的地方也是實用性很強的。