AngularJS基础 ng-list 指令详解及示例代码

 更新时间:2016年08月02日 10:08:08   投稿:lqh  
本文主要介绍AngularJS ng-list 指令,这里帮大家整理了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 指令的资料整理,后续继续整理相关资料,谢谢大家支持!

相关文章

  • Angular6使用forRoot() 注册单一实例服务问题

    Angular6使用forRoot() 注册单一实例服务问题

    这篇文章主要介绍了Angular6使用forRoot() 注册单一实例服务问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • 深入理解angular2启动项目步骤

    深入理解angular2启动项目步骤

    本篇文章主要介绍了深入理解angular2启动步骤 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Angular动画实现的2种方式以及添加购物车动画实例代码

    Angular动画实现的2种方式以及添加购物车动画实例代码

    这篇文章主要给大家介绍了关于Angular动画的2种方式以及添加购物车动画的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-08-08
  • angularjs实现的购物金额计算工具示例

    angularjs实现的购物金额计算工具示例

    这篇文章主要介绍了angularjs实现的购物金额计算工具,涉及AngularJS事件监听、数值计算相关操作技巧,需要的朋友可以参考下
    2018-05-05
  • Angular4.0动画操作实例详解

    Angular4.0动画操作实例详解

    这篇文章主要介绍了Angular4.0动画操作,结合实例形式详细分析了Angular4.0动画的原理、定义及使用等相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • Angular.js项目中使用gulp实现自动化构建以及压缩打包详解

    Angular.js项目中使用gulp实现自动化构建以及压缩打包详解

    基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中。下面这篇文章主要给大家介绍了关于在Angular.js项目中使用gulp实现自动化构建以及压缩打包的相关资料,需要的朋友可以参考下。
    2017-07-07
  • Angular模板表单校验方法详解

    Angular模板表单校验方法详解

    这篇文章主要为大家详细介绍了Angular模板表单校验方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • angular 数据绑定之[]和{{}}的区别

    angular 数据绑定之[]和{{}}的区别

    这篇文章主要介绍了angular 数据绑定之[]和{{}}的区别,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • angularjs实现上拉加载和下拉刷新数据功能

    angularjs实现上拉加载和下拉刷新数据功能

    本篇文章主要介绍了angularjs实现上拉加载和下拉刷新数据功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • angular2中使用第三方js库的实例

    angular2中使用第三方js库的实例

    下面小编就为大家分享一篇angular2中使用第三方js库的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02

最新评论