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请求),但又实现了不用点击搜索按钮可自动执行搜索。当然,这个指令用在别的地方也是实用性很强的。
最新文章
- 设计模式(三)工厂方法模式(Factory Pattern)
- iOS开发小技巧--修改按钮内部图片和文字之间的间距(xib)
- python打印详细的异常信息
- ☀【jQuery插件】DOM 延迟渲染
- 关于数据表命名为mysql保留的时候的操作
- hdu_5919_Sequence II(主席树)
- 关于dom4j解析xml
- 微信企业号JS-SDK选择图片、上传图片
- 51 nod 1405 树的距离之和
- 虚拟机console基础环境配置——安装VMware Tools
- shell的exec命令
- 干了这杯Java之集合概览
- es6入门4--promise详解
- 基于LVM卷的MYSQL快照恢复
- 【转】Go Interface 源码剖析
- Node.js &; SSR
- python 本地变量和全局变量 locals() globals() global nonlocal 闭包 以及和 scala 闭包的区别
- C#实体类对象修改日志记录
- VS2013 UML 如何复制文件
- Windows系统php5.6安装Imagick库
热门文章
- 前端科普文—为什么<;!DOCTYPE>; 不可或缺
- .html 、.htm 、 .shtml 以及 .shtm 四种扩展名的文件区别
- <;实训|第八天>;超级管理员管理linux用户行为权限附监控主机状态
- JAVA_集合框架虐我千百遍,虐也是一种进步
- SDN组网相关解决方案
- VI命令----用于检索
- js中的forEach
- 【前端积累】createElement createTextNode
- iOS -- MJrefresh
- 1018Mysql分表分库