野獸的Angular Api 學習、翻譯及理解 - - ngList、ngRepeat、ngModelOptions

標籤：

野獸的 ng api 學習 - - ngList、ngRepeat、ngModelOptions

 

ngList

在文本輸入的分隔的字串和字串數組間做轉換，可以是一個固定的字串分隔符號（預設逗號）或Regex。

格式：ng-list=”value”

value：運算式  通過這個值分隔字串。

使用代碼：

<div ng-app="Demo">

    <div ng-controller="demoCtrl">

       <input ng-model="list" ng-list=".">

        {{list}}

    </div>

</div>

<script>

    angular.module("Demo", [])

    .controller("demoCtrl", ["$scope", function ($scope) {

        $scope.list = ["a", "b", "c"];

    }])

</script>

在運行完上面的使用代碼後，你會發現，用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：迴圈數組的第一項。

$middle：$first和$last之間的中間項。

$last：迴圈數組的最後一項。

$even：迴圈數組的偶數項。

$odd：迴圈數組的奇數項。

使用代碼：

    <div ng-app="Demo">

        <div ng-controller="demoCtrl">

            <ol>

                <li ng-repeat="i in list">{{i}}</li>

            </ol>

        </div>

    </div>

    <script>

        angular.module("Demo", [])

        .controller("demoCtrl", ["$scope", function ($scope) {

            $scope.list = ["a","b","c"];

        }])

</script>

使用小技巧 ：

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}}" />

這個指令可以用在輸入延時搜尋的input中，就比如：做一個搜尋方塊，使用者輸入的時候不進行搜尋，當使用者停止輸入後N秒，再執行搜尋，這樣保證了不會輸入變化的時候及時的去請求（這樣會造成頁面大量的XMLHttpRequest請求），但又實現了不用點擊搜尋按鈕可自動執行搜尋。當然，這個指令用在別的地方也是實用性很強的。

今天先扯到這，洗洗睡去了

 

野獸的Angular Api 學習、翻譯及理解 - - ngList、ngRepeat、ngModelOptions