AngularJS(三):重复HTML元素、数据绑定
本文也同步发表在我的公众号“我的天空”
重复HTML元素
在前端的页面编写中,我们会经常遇到重复HTML元素,譬如绘制表格、菜单等,如以下代码显示一个简单的li列表:
<body>
<ul id="ul_cities">
</ul>
</body><script>
window.onload=function(){
var cities=['上海','成都','北京','广州'];
var ul=document.getElementById("ul_cities");
var li;
for(var i=0;i<cities.length;i++){
li=document.createElement("li");
li.innerHTML=cities[i];
ul.appendChild(li);
}
}
</script>
示例代码AngularJS_03.html
在AngularJS中, 可以通过ng-repeat指令来方便的实现HTML元素的重复,如以下代码示例:
<body ng-app ng-init="cities=['上海','成都','北京','广州']">
<ul>
<li ng-repeat="city in cities">{{city}}</li>
</ul>
</body>
示例代码AngularJS_04.html
以上代码中,我们首先用ng-app指令声明的AngularJS的应用范围,使用ng-init初始化了cities数组数据,随后在li标签内加入了ng-repeat命令,表明其是一组重复的HTML元素,其重复的数据源是cities,最后在li里写入表达式{{city}},表明其显示变量city。
比较两个示例,可以发现使用ng-repeat命令后,代码变得更加简洁,我们也初步领略了AngulerJS带来的好处。接下来的代码演示如何在表格中显示一组对象数组:
<body ng-app ng-init="persons=[
{name:'张三',sex:'男',age:23},
{name:'李四',sex:'男',age:18},
{name:'王红',sex:'女',age:24}]"><table>
<tr ng-repeat="person in persons">
<td>{{person.name}}</td>
<td>{{person.sex}}</td>
<td>{{person.age}}</td>
</tr>
</table>
</body>
示例代码AngularJS_05.html
数据绑定
通过ng-model指令可以将值绑定在指定元素上,典型的应用是不同元素间的数据同步。譬如我们希望在一个文本框内输入的内容同步的在其他元素上显示,则可以使用数据绑定,如下所示:
<body ng-app>
<input type="text" ng-model="a">
<p>你输入的是:{{a}}</p>
</body>
示例代码AngularJS_06.html
在以上这段代码中,我们在一个input上使用了数据绑定指令ng-model,其绑定的目标是a变量,而在p标签中,包含了一个表达式,显示a的值。这样当input文本框里的内容发生改变时,a的值也发生同步变化,而这种变化又反应在p标签的表达式中,这样便完成了文本框内容与p标签内容的绑定。
AngulerJS中的绑定是双向的,如以下代码,无论哪一个文本框的内容发生变化,另一个也相应同步修改:
<body ng-app>
<input type="text" ng-model="a">
<input type="text" ng-model="a">
<p>你输入的是:{{a}}</p>
</body>
示例代码AngularJS_07.html
该系列的示例代码
https://github.com/panyongwow/angularJS
AngularJS(三):重复HTML元素、数据绑定的更多相关文章
- AngularJS基础02 神奇的数据绑定(Binding)
作者:arccosxy 转载请注明出处:http://www.cnblogs.com/arccosxy/ 上一节,我们在JS中声明一个scope变量然后在HTML直接访问它,这非常的酷.但是Angu ...
- hihoCoder 后缀自动机三·重复旋律6
后缀自动机三·重复旋律6 时间限制:15000ms 单点时限:3000ms 内存限制:512MB 描述 小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一个音乐旋律被表示为一段数构成的数列. 现在小Hi ...
- [转]java去除List中重复的元素
java去除List中重复的元素 如果用Set ,倘若list里边的元素不是基本数据类型而是对象, 那么请覆写Object的boolean equals(Object obj) 和int ...
- js删除数组中重复的元素
1.方法一 将数组逐个搬到另一个数组中,当遇到重复元素时,不移动,若元素不重复则移动到新数组中 function unique(arr){ var len = arr.length; var resu ...
- Java-ArrayList使用技巧---从第一个List中去除所有第二个List中与之重复的元素
需求:从 mAllList 中去除所有 mSubList 中与之重复的元素 测试数据:mAllList 中包含100000个无序无重复字符串,mSubList 中包含50000个无序无重复字符串 方法 ...
- C#实现如何判断一个数组中是否有重复的元素 返回一个数组升序排列后的位置信息--C#程序举例 求生欲很强的数据库 别跟我谈EF抵抗并发,敢问你到底会不会用EntityFramework
C#实现如何判断一个数组中是否有重复的元素 如何判断一个数组中是否有重复的元素 实现判断数组中是否包含有重复的元素方法 这里用C#代码给出实例 方法一:可以新建一个hashtable利用hasht ...
- 如何判断/检查一个集合(List<string>)中是否有重复的元素
问题描述 在.NET/C#应用程序编程开发中,如何判断一个字符串集合List<string>中是否有重复的元素? 假如有如下的List<string>集合: var lstNa ...
- set集合,是一个无序且不重复的元素集合
set集合,是一个无序且不重复的元素集合 class set(object): """ set() -> new empty set object ...
- hiho一下122周 后缀数组三·重复旋律
后缀数组三·重复旋律3 时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一个音乐旋律被表示为长度为 N 的数构成的数列.小Hi ...
随机推荐
- django根据不同app配置相应的log文件
django根据不同app配置相应的log文件 settings.py # django logging LOG_PATH = "/var/log/blog/" LOGGING = ...
- ES5.X相关API和技巧汇总
https://blog.csdn.net/laoyang360/article/details/77412668
- Linux做脚本定时任务(定时清理日志)
无论一些面试问题,还是实际应用,都会用到虚拟机的定时任务.现做定时清理日志日志做一总结. 1.查看/etc/crontab文件. linux 系统则是由 cron (crond) 这个系统服务来控制的 ...
- Working Experience - WPF 中 DataGrid 控件的应用
问题: 添加控件后, 编辑单元格会出现异常 绑定 ItemsSource 属性后, 更新绑定对象的数据, UI 不刷新 如何显示控件中 ComboBox 类型 解决方法: 绑定 ItemsSource ...
- 快速发现并解决maven依赖传递冲突
此文已由作者翟曜授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 最近在测试过程中,遇到了几次maven传递依赖冲突的问题,所以记录下解决的过程,遇到类似问题供参照. 问题现象 ...
- 《深入理解Java虚拟机》笔记01 -- 运行时数据区
运行时数据区示意图 1. 程序计数器 占用一块较小的内存空间,它可以看作是当前线程所执行的字节码的行号指示器.主要用来记录线程执行到哪条语句了,分支.循环.跳转.异常处理.线程恢复等功能都需要依赖这个 ...
- [Swift]Xcode实际操作
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- SpringBoot2.0 基础案例(06):引入JdbcTemplate,和多数据源配置
一.JdbcTemplate对象 1.JdbcTemplate简介 在Spring Boot2.0框架下配置数据源和通过JdbcTemplate访问数据库的案例. SpringBoot对数据库的操作在 ...
- Nacos深入浅出(二)
如果你的服务已经能正常跑起来,个人建议可以先感受下nacos的魅力,也就是怎么使用吧 直接上代码 @Controller @NacosPropertySource(dataId = "spr ...
- 黑马MyBatisday2 MyBatis Dao层实现 接口代理实现&传统实现 动态SQL和SQL抽取 自定义类型处理 分页插件PageHelper
package com.itheima.mapper; import com.github.pagehelper.Page; import com.github.pagehelper.PageHelp ...