博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Angular - - ngList、ngRepeat、ngModelOptions
阅读量:5902 次
发布时间:2019-06-19

本文共 1779 字,大约阅读时间需要 5 分钟。

ngList

在文本输入的分隔的字符串和字符串数组间做转换,可以是一个固定的字符串分隔符(默认逗号)或正则表达式。

格式:ng-list=”value”

value:表达式  通过这个值分隔字符串。

使用代码:

{ {ctrl.list}}
(function () {    angular.module("Demo", [])    .controller("testCtrl", testCtrl);    function testCtrl() { var vm = this; vm.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。

使用代码:

  1. { {i}}
(function () {    angular.module("Demo", [])    .controller("testCtrl", testCtrl);    function testCtrl() { var vm = this; vm.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中,就比如:做一个搜索框,用户输入的时候不进行搜索,当用户停止输入后N秒,再执行搜索,这样保证了不 会输入变化的时候及时的去请求(这样会造成页面大量的XMLHttpRequest请求),但又实现了不用点击搜索按钮可自动执行搜索。当然,这个指令用 在别的地方也是实用性很强的。

转载地址:http://ldkpx.baihongyu.com/

你可能感兴趣的文章
Windows 8部署系列PART3:配置WDS服务器环境
查看>>
Ruby中写一个判断成绩分类的脚本
查看>>
《从零开始学Swift》学习笔记(Day 40)——析构函数
查看>>
Exchange2003-2010迁移系列之十,Exchange证书攻略
查看>>
infortrend ESDS RAID6故障后的数据恢复方案
查看>>
extmail集群的邮件负载均衡方案 [lvs dns postfix]
查看>>
SCCM2012SP1---资产管理和远程管理
查看>>
org.springframework.util 类 Assert的使用
查看>>
java提供类与cglib包实现动态代理
查看>>
flask上传多个文件,获取input中的数组
查看>>
更改UIView的背景
查看>>
JLNotebookView
查看>>
StackPanel
查看>>
SPUserResizableView
查看>>
UML类图示例
查看>>
sh ./ 执行区别
查看>>
宏定义(#ifndef+#define+#endif)的作用
查看>>
Prometheus安装部署以及配置
查看>>
Oracle存储过程大冒险-2存储过程常用语法
查看>>
taobao-pamirs-schedule-2.0源码分析——类设计
查看>>