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的更多相关文章
- Angular - - ngList、ngRepeat、ngModelOptions
ngList 在文本输入的分隔的字符串和字符串数组间做转换,可以是一个固定的字符串分隔符(默认逗号)或正则表达式. 格式:ng-list=”value” value:表达式 通过这个值分隔字符串. ...
- 前端MVC学习总结(二)——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
- AngularJS 简介、指令、表达式
AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HT ...
- 前端MVC学习笔记(二)——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
- 在 Azure 中的 Linux VM 上创建 MongoDB、Express、AngularJS 和 Node.js (MEAN) 堆栈
本教程介绍如何在 Azure 中的 Linux VM 上实现 MongoDB.Express.AngularJS 和 Node.js (MEAN) 堆栈. 通过创建的 MEAN 堆栈,可以在数据库中添 ...
- AngularJS 的全选、反选实现
目录 AngularJS 的全选.反选实现 一.需求 二.思路 三.实现 AngularJS 的全选.反选实现 一.需求 要使用 AngularJS 实现 checkbox 的全选.反选. 其中所有项 ...
- AngularJs:Service、Factory、Provider依赖注入使用与区别
本教程使用AngularJS版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ ...
- AngularJs ngCloak、ngController、ngInit、ngModel
ngCloak ngCloak指令是为了防止Angular应用在启动加载的时候html模板将会被短暂性的展示.这个指令可以用来避免由HTML模板显示造成不良的闪烁效果. 格式: ng-cloak ...
- AngularJS:何时应该使用Directive、Controller、Service?【新手必看】
(这篇文章你们一定要看,尤其初学的人,好吗亲?) 大漠穷秋 译 AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉.(译者注:老外真谦虚,我大天 ...
随机推荐
- 读书摘要,一种新的黑客文化:programming is forgetting
http://opentranscripts.org/transcript/programming-forgetting-new-hacker-ethic/ 这篇文章非常有意思,作者是一个计算机教师, ...
- C/C++实践笔记_001Helloworld
1.void返回值为空,int返回值Linux c,c++中,Main函数可以返回也可以不返回,普通函数必须返回.C编译松散,很容易结果出错,C++编译严格一些,结果一般会正确C语言不返回不会报错,但 ...
- css3实践之图片轮播(Transform,Transition和Animation)
楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation. 本文需要实现效 ...
- 使用pngquant来压缩png资源缩小apk
最近发现了一个叫做pngquant的工具,可以有效的压缩资源文件中的png文件,从而减小发布的apk的大小.我发现这个工具有两个特点: 1. 真无损,压缩后重新运行了我的app发现是没有任何区别的 2 ...
- 柯尔莫可洛夫-斯米洛夫检验(Kolmogorov–Smirnov test,K-S test)
柯尔莫哥洛夫-斯米尔诺夫检验(Колмогоров-Смирнов检验)基于累计分布函数,用以检验两个经验分布是否不同或一个经验分布与另一个理想分布是否不同. 在进行cumulative probab ...
- 【Javascript】好用的js弹层插件,layerUI
官网:layerUI 中文手册:layerAPI
- 屠龙之路_战胜View&对DataBase猛烈进攻_ThirdDay
避开狮身人面兽攻击的屠龙战士继续前行.突然眼见一黑,战士们进到迷宫里,机智的战士用一根羊毛线绑在迷宫入口处,少年们手握着羊毛线,在迷宫里继续前行.在那样一个拐角处,遇到了恶龙的手下View&D ...
- 屠龙之路_转角遇到服务器大魔王_FourthDay
Day4:将View打败后,View还送了屠龙团一个信物.于是在今天的旅途中,少年们在遇到View的其他兄弟时,以此信物将他们收于麾下,并借助他们的力量打败了服务器大魔王." Fightin ...
- [转]jquery 对 Json 的各种遍历
原文地址:http://caibaojian.com/jquery-each-json.html 概述 JSON(javascript Object Notation) 是一种轻量级的数据交换格式,采 ...
- Linux_Shell_grep
grep [选项] "搜索内容" 文件名 选项列表: -i 忽略大小写 -n 输出行号 -v 反向查找 --color=auto 搜索出的关键字用颜色显示 ll|g ...