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请求），但又实现了不用点击搜索按钮可自动执行搜索。当然，这个指令用在别的地方也是实用性很强的。

AngularJs ngList、ngRepeat、ngModelOptions相关推荐

在 Azure 中的 Linux VM 上创建 MongoDB、Express、AngularJS 和 Node.js (MEAN) 堆栈
本教程介绍如何在 Azure 中的 Linux VM 上实现 MongoDB.Express.AngularJS 和 Node.js (MEAN) 堆栈. 通过创建的 MEAN 堆栈,可以在数据库中添 ...
使用 Node.js、Express、AngularJS 和 MongoDB 构建一个Web程序
为什么80%的码农都做不了架构师?>>> 使用 Node.js.Express.AngularJS 和 MongoDB 构建一个实时问卷调查应用程序 2014 年 3 月 20 ...
Web前端学习笔记——AngularJS之简介、起步、特性
目录 Angular 简介 Angular 是什么特性发展历史起源困境 Angular 2 横空出世 ng2 相比 ng1 现状那我为什么要学习使用 Angular ? 学习 Angular ...
Angular2、AngularJS、React、vue.js过去一年的Google趋势分析
Angular2.AngularJS.React.vue.js过去一年的Google.百度趋势分析最近在学angular,但是在国内的话似乎是vuejs比较火,百度指数只有国内数据分析,于是翻了下墙 ...
angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？
大家好,我是IT修真院郑州分院第七期的学员冯亚超,一枚正直纯洁善良的WEB程序员今天给大家分享一下,题目angular js 常用指令ng-if.ng-class.ng-option.ng-valu ...
MVC、MVP、MVVM
MVC.MVP.MVVM这些模式是为了解决开发过程中的实际问题而提出来的,目前作为主流的几种架构模式而被广泛使用. 一.MVC(Model-View-Controller) MVC是比较直观的架构模式 ...
web前端 vue、react、angular三大框架对比与jquery的对比
前端当前最火的三大框架当属vue.react以及angular了. 但是在做项目的时候,我们怎么去选择呢? 这里做一个比较,希望大家可以有一个比较清晰的认识. vue与react vue和react ...
Google、亚马逊、微软、阿里巴巴开源软件一览
Google.亚马逊.微软 .阿里巴巴开源软件一览大公司为什么要发布开源项目?一是开源能够帮助他人更快地开发软件,促进世界创新,主要是社会价值层面的考虑.二是开源能够倒逼工程师写出更好的代码.三是开 ...
Vue、React、Angular最佳UI框架
摘要: 今天我们不聊技术,只"以貌取人". 刚入门的小伙伴问我(上面是我的自拍照),现在前端Vue.React.Angular这三个框架似乎都很好,反而不知道选择什么了,我当时开玩 ...
JavaScript高级day01-PM【对象、函数、回调函数、IIFE、this、关于语句分号问题、webstorm代码模板、复习】
笔记.视频.源码:JavaScript(基础.高级)笔记汇总表[尚硅谷JavaScript全套教程完整版] 目录 P7 07.尚硅谷_JS高级_对象 23:30 1. 什么是对象? 2. 为什么 ...

AngularJs ngList、ngRepeat、ngModelOptions

AngularJs ngList、ngRepeat、ngModelOptions相关推荐

最新文章

热门文章