zoukankan      html  css  js  c++  java
  • 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请求),但又实现了不用点击搜索按钮可自动执行搜索。当然,这个指令用在别的地方也是实用性很强的。

  • 相关阅读:
    LeetCode 1275. 找出井字棋的获胜者 Find Winner on a Tic Tac Toe Game
    LeetCode 307. 区域和检索
    LeetCode 1271 十六进制魔术数字 Hexspeak
    秋实大哥与花 线段树模板
    AcWing 835. Trie字符串统计
    Leetcode 216. 组合总和 III
    Mybatis 示例之 复杂(complex)属性(property)
    Mybatis 示例之 复杂(complex)属性(property)
    Mybatis 高级结果映射 ResultMap Association Collection
    Mybatis 高级结果映射 ResultMap Association Collection
  • 原文地址:https://www.cnblogs.com/ys-ys/p/4963296.html
Copyright © 2011-2022 走看看