AngularJS基础 ng-list 指令详解及示例代码
AngularJS ng-list 指令
AngularJS 实例
转换用户的输入为数组:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app=""> <p>在输入框中,输入一些文本,并使用逗号分隔它们:</p> <input ng-model="customers" ng-list/> <p>当使用 ng-list 指令时,你的输入信息会转换为数组,如下所示:</p> <pre>{{customers}}</pre> </div> </body> </html>
定义和用法
ng-list 指令将字符串转换为数组,并使用逗号分隔。
ng-list 指令还有另外一种转换方式,如果你有字符串数组希望在输入框中显示,你可以在 input 上使用 ng-list 指令。
ng-list 属性值定义了分隔符。
语法
<element ng-list="separator"></element>
<input>, <select>, <textarea>, 和其他可编辑元素支持该指令。
参数值
值 | 描述 |
---|---|
separator | 可选,定义分隔符,默认为", " |
以上就是对AngularJS ng-list 指令的资料整理,后续继续整理相关资料,谢谢大家支持!
相关推荐
-
AngularJS基础 ng-non-bindable 指令详细介绍
AngularJS ng-non-bindable 指令 AngularJS 实例 以下段落不需要使用 AngularJS 来编译: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script&
-
AngularJS基础 ng-mousemove 指令简单示例
AngularJS ng-mousemove 指令 AngularJS 实例 在鼠标指针在元素上移动时执行表达式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </
-
AngularJS基础 ng-model-options 指令简单示例
AngularJS ng-model-options 指令 AngularJS 实例 在失去焦点时绑定输入框的值到 scope 变量中: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></scrip
-
Angularjs 自定义服务的三种方式(推荐)
AngularJS简介: AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications). AngularJS 学习起来非常简单. angularjs 中可通过三种($provider,$factory,$service)方式自定义服务,以下是不同的实现形式: // 定义module , module中注入$provide var starterApp = angular.module('
-
AngularJS基础 ng-model 指令详解及示例代码
AngularJS ng-model 指令 AngularJS 实例 绑定输入框的值到 scope 变量中: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </hea
-
AngularJS ng-mousedown 指令
AngularJS ng-mousedown 指令 AngularJS 实例 在鼠标按下时执行表达式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head&g
-
AngularJS基础 ng-mouseleave 指令详解
AngularJS ng-mouseleave 指令 AngularJS 实例 在鼠标指针离开元素时执行表达式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </h
-
AngularJS基础 ng-mouseover 指令简单示例
AngularJS ng-mouseover 指令 AngularJS 实例 在鼠标指针移动到元素上时执行表达式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </
-
AngularJS基础 ng-mouseenter 指令示例代码
AngularJS ng-mouseenter 指令 AngularJS 实例 在鼠标指针穿过元素时执行表达式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </h
-
AngularJS基础 ng-keypress 指令简单示例
AngularJS ng-keypress 指令 AngularJS 实例 按下按键时执行的代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head>
随机推荐
- js document.write()使用介绍
- javascript封装的sqlite操作类实例
- DOS批处理高级教程 第七章 DOS批处理编程高级技巧
- Java设计模式之代理模式_动力节点Java学院整理
- iOS实现APP程序内部打开APP的AppStore页面
- asp.net 利用NPOI导出Excel通用类的方法
- PHP strtok()函数的优点分析
- yii框架搜索分页modle写法
- Python的time模块中的常用方法整理
- 对比分析C语言中的gcvt()和ecvt()以及fcvt()函数
- 简单实现js倒计时功能
- javascript实现可改变滚动方向的无缝滚动实例
- 微信小程序之页面跳转和参数传递的实现
- PowerShell在控制台输出特殊符号的方法
- Shell脚本判断Apache进程是否存在
- 详解jQuery中的deferred对象的使用(一)
- 基于jQuery实现多层次的手风琴效果附源码
- jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
- Android App使用SQLite数据库的一些要点总结
- 浅谈C++左值引用和右值引用