AngularJs ngList、ngRepeat、ngModelOptions


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請求),但又實現了不用點擊搜索按鈕可自動執行搜索。當然,這個指令用在別的地方也是實用性很強的。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM