AngularJS集合数据遍历显示
AngularJS集合数据遍历显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS集合数据遍历显示</title>
<script type="text/javascript" src="../js/angular.min.js"></script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<table width="100%" border="1">
<tr>
<td>序号</td>
<td>商品编号</td>
<td>商品名称</td>
<td>价格</td>
</tr>
<tr ng-repeat="product in products">
<td>{{$index+1}}</td>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
</tr>
</table>
</body>
<script type="text/javascript">
var myapp = angular.module("myapp",[]);
myapp.controller("myctrl",["$scope",function($scope){
$scope.products = [
{
id:1001,
name:'数码相机',
price:5000
},
{
id:1002,
name:'华为手机',
price:4000
}
];
}])
</script>
</html>
AngularJS集合数据遍历显示的更多相关文章
- 查询数据库中的表格---通过构造方法将数据存入到List集合中---遍历进行输出
package cn.jy.demo; import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.Res ...
- AngularJs从数据库获取数据并显示
哈哈,昨天下午和今天早上,花上一些时间,学习AngularJs,仅是粗略预览一下.很好,非常好. 由于手上有开发ASP.NET MVC环境,就在这测试下,去数据库获取数据并显示数据. 数据库表创建,添 ...
- 关于angularJS绑定数据时自动转义html标签
关于angularJS绑定数据时自动转义html标签 angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签 ...
- java 15 -3 集合的遍历的练习
练习:用集合存储5个动物对象,并把动物对象进行遍历. 分析: A:创建动物类 a:无参构造方法 b:有参构造方法 c:get.set方法 B:创建集合对象 a:Collection animal = ...
- 对JAVA集合进行遍历删除时务必要用迭代器
java集合遍历删除的方法: 1.当然这种情况也是容易解决,实现方式就是讲遍历与移除操作分离,即在遍历的过程中,将需要移除的数据存放在另外一个集合当中,遍历结束之后,统一移除. 2.使用Iterato ...
- AngularJS展示数据的ng-bind指令和{{}} 区别
在AngularJS中显示模型中的数据有两种方式: 一种是使用花括号插值的方式: 1 <p>{{text}}</p> 另一种是使用基于属性的指令,叫做ng-bind: 1 &l ...
- Java之集合的遍历与迭代器
集合的遍历 依次获取集合中的每一个元素 将集合转换成数组,遍历数组 //取出所有的学号, 迭代之后显示学号为1004-1009 Object[] c=map.keySet().toArray();// ...
- java-redis集合数据操作示例(三)
redis系列博文,redis连接管理类的代码请跳转查看<java-redis字符类数据操作示例(一)>. 一.集合类型缓存测试类 public class SetTest { /** * ...
- set集合的遍历(基于迭代器和增强for循环,没有一般的for循环)
赋:开发项目中见到的代码 Java中Set集合是一个不包含重复元素的Collection,首先我们先看看遍历方法 package com.sort; import java.util.HashSet; ...
随机推荐
- Scrapy 框架 使用 selenium 爬取动态加载内容
使用 selenium 爬取动态加载内容 开启中间件 DOWNLOADER_MIDDLEWARES = { 'wangyiPro.middlewares.WangyiproDownloaderMidd ...
- JavaScript模块载入框架sea.js 学习一
简单总结sea.js 学习 文件文件夹结构 /sea/sea.js 下载地址 http://seajs.org/docs/#downloads /sea/jquery-sea.js ...
- http: server gave HTTP response to HTTPS client & Get https://192.168.2.119/v2/: dial tcp 192.168.2.119:443: getsockopt: connection refused
http: server gave HTTP response to HTTPS client 出现这问题的原因是:Docker自从1.3.X之后docker registry交互默认使用的是HTTP ...
- BAT美团滴滴java面试大纲(带答案版)之四:多线程Lock
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 这是多线程的第二篇. 多线程就像武学中对的吸星大法,理解透了用好了可以得道成仙,俯瞰芸 ...
- Linux 文件系统管理
Linux 文件系统管理 课程大纲 文件系统构成及命令 硬盘分区及管理 磁盘配额 备份与恢复 文件系统构成 /usr/bin ./bin:存放所有用户可以执行的命令 /usr/s ...
- java 定时任务多线程处理
@Configuration@EnableSchedulingpublic class ScheduleConfig implements SchedulingConfigurer, AsyncCon ...
- day23 Pythonpython 本文re模块
re模块用于对python的正则表达式的操作. 字符: . 匹配除换行符以外的任意字符 \w 匹配字母或数字或下划线或汉字 \s 匹配任意的空白符 \d 匹配数字 \b 匹配单词的开始或结束 ^ 匹配 ...
- 01-vue学习篇-以优雅的姿势创建vue项目
前言 小白一枚,今年(2019)准备学习一下前端的技术,因为发现自己对后端(python)相对比较熟悉但是还是写不出一个优雅的系统,可见前端的重要性,于是静下心来跟大佬学习.在不断的激励自己调整自己的 ...
- CF434D Nanami's Power Plant 最小割
传送门 因为连距离限制的边的细节调了贼久QAQ 这个题和HNOI2013 切糕性质相同,都是有距离限制的最小割问题 对于每一个函数,用一条链记录变量\(x\)在不同取值下这个函数的贡献.对于一个\(x ...
- 搭建SpringBoot+dubbo+zookeeper+maven框架(四)
今天我们完成框架的thymeleaf模板显示页面功能,页面的用户登陆,密码的AES加密解密,输错3次进行验证码验证功能,东西可能比较多,这个是我这两天在网上结合各种资源整合出来的,基本功能都已经实现, ...