AngularJs ngList、ngRepeat、ngModelOptions

2023-11-08

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJs ngList、ngRepeat、ngModelOptions 的相关文章

  • 上传时自动缩小 CSS 和 Javascript

    有谁知道通过上传处理 脚本自动运行某些文件类型的好方法 当我将 CSS 和 Javascript 上传到服务器时 我试图自动缩小它们 在本地保留一个漂亮的 人类可读的版本 同时在服务器上保留一个缩小的版本 我目前在 Windows 上使用
  • Javascript:将 JSON 字符串转换为 ES6 映射或其他形式以保留键的顺序

    ES6 或后续版本 Javascript 或 TypeScript 中是否有原生 内置 方法将 JSON 字符串转换为 ES6 映射 或者可以选择要实现的自制解析器 目标是保留 JSON 字符串编码对象的键顺序 Note 我故意不使用 解析
  • 将 Javascript 正则表达式转换为 PHP

    我知道这个问题已经被问了大约十几次 但是从技术上讲 这个问题并不是一个骗局 如果您愿意 请检查其他问题 基本上 我有一个 Javascript 正则表达式来检查用于前端验证的电子邮件地址 并且我使用 CodeIgniter 在后端进行双重检
  • 在 Javascript 中获取文本框的值

    我有这个html代码 table border cellpadding 3 cellspacing 0 tbody tr td Song td td td tr tbody table
  • 无法读取未定义错误的属性“匹配”

    我试图在 React JS 前端显示一些文本来代替个人资料图像 当它不可用时 基本上 我将当前客户名称传递给一个函数 该函数提取名称中所有单词的第一个字符 我能够仅显示名称 但是当我执行函数调用时 出现 无法读取未定义的属性 匹配 错误 并
  • 如果文本过滤器在 ng-repeat 中没有返回结果,则显示消息

    假设我们有一个带有文本过滤器的 ng repeat
  • 执行oauth时如何创建弹出窗口?

    我想通过使用弹出窗口来完成 Lifestream 和其他网站使用 oauth 身份验证所做的事情 他们打开一个弹出窗口 不知何故没有被弹出窗口拦截器阻止 并将他们的网站变灰 然后 在允许 oauth 访问时 它会说重定向回原始站点并终止弹出
  • 如何将这段 javascript 代码重写为 C++11?

    这是我在 Javascript Definitive Guide 中看到的 javascript 闭包代码 我想把它写成C 11 var uniqueID1 function var id 0 return function return
  • 如何在给定目标索引数组的情况下对数组进行就地排序?

    你如何对给定的数组进行排序arr in place给定目标索引数组ind 例如 var arr A B C D E F var ind 4 0 5 2 1 3 rearrange arr ind console log arr gt B E
  • 从 json 文件加入时添加角色 (autorole)

    我对 JS 相当陌生 为了学习 我决定为 Discord 制作一个机器人 我学到了很多并且正在继续学习 我有一个 autorole 的想法 我知道传统的做法 bot on guildMemberAdd member gt var role
  • Lodash 和 Underscore.js 之间的差异 [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 为什么有人会更喜欢Lodash http lodash com or 下划线 js http underscorejs org 实用程序库优于其
  • 在 Jest 测试中设置时刻时区

    我有 util 函数 它以特定的日期格式解析给定的日期 即 2019 01 28 然后使用momentJS检索当天的开始并将其转换为 ISO 日期格式 dates js import moment from moment export co
  • EmberJS:如何为 ember-data RESTAdapter 中的模型提供特定的 URL?

    问题一 如果我有一个名为 Company 的余烬数据模型 我如何告诉它点击 businesses and businesses id而是检索记录 有没有办法指定给定模型的 url 更好的是 像 BackboneJS 一样 我可以在运行时计算
  • Javascript 警报/消息框中的欧元符号或其他实体

    有谁知道我如何在 javascript 警报窗口中显示欧元或其他 html 实体 alert u20AC HTML 实体字符查找 http leftlogic com lounge articles entity lookup
  • ES6 模板文字可以在运行时替换(或重用)吗?

    tl dr 是否可以制作可重用的模板文字 我一直在尝试使用模板文字 但我想我就是不明白 现在我感到沮丧 我的意思是 我想我明白了 但 它 不应该是它的运作方式 或者它应该如何实现 它应该变得不同 我看到的所有示例 甚至标记模板 都要求 替换
  • Cypress.io 如何处理异步代码

    我正在将旧的水豚测试转移到 cypress io 因为我们的应用程序正在采用 SPA 方式 在我们的案例中 我们有超过 2000 个测试 涵盖了很多功能 因此 测试功能的常见模式是让用户创建并发布报价 一开始我写了 cypress 浏览页面
  • Kotlin JavaScript 到 TypeScript 定义文件

    我已经找到了ts2kt 库 https github com Kotlin ts2kt这将从任意位置创建 Kotlin 头文件 d ts文件 但是 我想朝相反的方向走 我想构建一个可以编译为 JavaScript 的 Kotlin 库 但我
  • 图像未显示在从 HTML 创建的 PDF 上

    我想动态创建 PDF 这意味着我将从 Google Drive 获取文件 然后将它们放入 HTML 代码中 并尝试从中创建 PDF 一切工作正常 除了图像没有显示 我现在正在做的是 从 HTML 字符串创建 HtmlOutput 获取该 H
  • 使用 JQueryUI Autocomplete 和 Meteor 的规范方法

    使用 Meteor 我想了解使用 JQuery UI 自动完成处理大量服务器端数据的最有效方法 我有两个工作提案 想听听关于差异的意见 以及是否有更好的方法来做同样的事情 使用发布 订阅 Server Meteor publish auto
  • Javascript 最佳实践,为什么使用逗号来链接函数/变量声明?

    我一直在为 jQuery jQueryLog 开发一个插件 以允许调试链选择器和返回值 如果你想检查一下 你可以这样做here http www jquerylog com 这已经是第二个版本了 第一个版本实际上是经过编辑的 jQuery

随机推荐

  • 51单片机 LCD1602

    LCD1602 H ifndef LCD1602 H define LCD1602 H 用户调用函数 void LCD Init void LCD ShowChar unsigned char Line unsigned char Colu
  • 【解决方案】PicGo图片上传失败问题【少走弯路】

    解决方案 PicGo图片上传失败问题 少走弯路 1 检查Server设置 选择PicGo设置 选择设置Server 确认设置监听端口为 36677 如果没有问题的话可以尝试关闭 退出APP 再开启Server 未能解决再继续操作 2 检查阿
  • Android:手把手带你了解实用的Android Jetpack

    转自 https blog csdn net carson ho article details 104243841 前言 在2018年 Google I O 大会上发布了一系列辅助Android开发者开发的实用工具集合 Jetpack 今
  • Unity制作简单动画效果

    需求 制作一段门旋转的动画 效果如下 解决办法 1 在Unity中点击Window gt Animation gt Animation 调出Animation面板 如下 2 为了让门的轴心在门边上以便于制作门绕门边旋转的效果 需要先新建一个
  • Rust交叉编译开发环境的搭建

    为嵌入式开发引入新的编程语言 对于嵌入式系统软件和应用软件的开发而言 编程语言的重要性次于整体的软件架构设计的重要性 不过仍有必要谨慎地选择编程语言 因为这涉及开发效率 软件性能 以及团队成员的技术能力 譬如 若整个嵌入式软件的绝大数组件是
  • 蓝桥杯 分数统计---递归

    题目 1500 蓝桥杯 算法提高VIP 分数统计 时间限制 1Sec 内存限制 128MB 提交 1541 解决 727 题目描述 给定一个百分制成绩T 将其划分为如下五个等级之一 90100为A 8089为B 7079为C 6069为D
  • Spring MVC参数的传递与接收

    SpringMVC主要做的就两方面的操作 在Controller接收从jsp传递过来的数据 把Controller的数据传递到jsp页面 将Controller里边的数据传到jsp 其返回值有三种类型 ModelAndView void S
  • Swift3.0学习之CollectionView的简单使用

    1 设置layout let layout UICollectionViewFlowLayout layout itemSize CGSize width 60 height 80 设置item尺寸 layout minimumLineSp
  • Python学习笔记(零)————Python简介及基础

    目录 1 查看 Python 版本 2 脚本文件 3 Python3 简介 4 Python 发展历史 5 Python 特点 6 Python 应用 7 Python环境搭建 1 查看 Python 版本 我们可以在命令窗口 Window
  • Docker入门(安装、换阿里源及配置阿里云镜像加速)

    文章目录 一 Docker 概述 1 1 Docker 为什么出现 1 2 Docker 的历史 1 3 聊聊 Docker 1 4 Docker 能干嘛 二 Docker 安装 2 1 Docker 的基本组成 2 2 安装 Docker
  • warning: array subscript is above array bounds

    问题描述 warning array subscript is above array bounds Warray bounds 数组下标使用越界 需检查数组的使用 下标是否正确 warning pointer targets in pas
  • 网页链接区块链wallet_WAX云钱包解决了区块链的最后难题

    点击蓝字 关注我们 区块链的最后的难题已被解决 我用过很多区块链 dApps 有些很神奇 有些则不然 但是几乎所有这些dApp都是有限制的 因为当新用户上线时 很难和这些应用程序磨合得好 现在登录 dApp 就像用制作复杂的鲁布 戈德堡机械
  • Oracle安装教程及PL/SQL Developer下载安装及使用

    作为按照各种教程安装了5 6次Oracle数据库的人来说 不得不把之前踩过的坑都总结一下 1 首先 请下载Oracle 11g和plsql PL SQL Developer 这里给出百度云网盘下载链接 只需要下载解压就行了 链接 https
  • 数字图像处理之低通滤波器实现原理及方法(Matlab)

    1 傅里叶变换与频域 在之前的文中 我们已经进行过一些基本的图像处理 比如 使用低通滤波可以将图像模糊 也有些许降噪的作用 这些都是在空间域内进行的滤波处理 这个处理主要是依靠卷积来进行计算的 首先 从连续的一维卷积入手 如下所示 将上式进
  • Run-Time Check Failure #0 错误

    使用VS 遇到过一个错误 如下图 文字描述是这样的 Run Time Check Failure 0 The value of ESP was not properly saved across a function call This i
  • 智能优化算法 — 蜣螂优化算法(Dung beetle optimizer,DBO)

    引言 小时候 蜣螂还是比较多见的 还顽皮地将粪球给它弄走 或者给它来点障碍 现在放牛的几乎看不到了 蜣螂没东西可推了 也慢慢从我们的视线中消失了 DBO介绍 2022年11月27日 东华大学沈波教授团队 继麻雀搜索算法 Sparrow Se
  • 关于Lab5 github上传后文件名大小写不变

    遇到的问题 由于checkstyle等工具检查出本地包名不符合规范 修改了其大小写之后 重新上传到github上发现包内类中package后包名已经改变 但是文件夹名并没有改变 尝试解决一 执行git config global core
  • spring boot升级spring cloud注意事项

    项目升级 从springboot转成springcloud 记录一些过程中遇到的问题和坑 一 确定版本和组件选型 版本不兼容会造成很多问题 所以需要根据项目使用的Spring Boot Version确定相关版本 此处使用的是Spring
  • for循环达到指定循环次数

  • AngularJs ngList、ngRepeat、ngModelOptions

    ngList 在文本输入的分隔的字符串和字符串数组间做转换 可以是一个固定的字符串分隔符 默认逗号 或正则表达式 格式 ng list value value 表达式 通过这个值分隔字符串 使用代码 div div