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集合数据遍历显示的更多相关文章

  1. 查询数据库中的表格---通过构造方法将数据存入到List集合中---遍历进行输出

    package cn.jy.demo; import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.Res ...

  2. AngularJs从数据库获取数据并显示

    哈哈,昨天下午和今天早上,花上一些时间,学习AngularJs,仅是粗略预览一下.很好,非常好. 由于手上有开发ASP.NET MVC环境,就在这测试下,去数据库获取数据并显示数据. 数据库表创建,添 ...

  3. 关于angularJS绑定数据时自动转义html标签

    关于angularJS绑定数据时自动转义html标签 angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签 ...

  4. java 15 -3 集合的遍历的练习

    练习:用集合存储5个动物对象,并把动物对象进行遍历. 分析: A:创建动物类 a:无参构造方法 b:有参构造方法 c:get.set方法 B:创建集合对象 a:Collection animal = ...

  5. 对JAVA集合进行遍历删除时务必要用迭代器

    java集合遍历删除的方法: 1.当然这种情况也是容易解决,实现方式就是讲遍历与移除操作分离,即在遍历的过程中,将需要移除的数据存放在另外一个集合当中,遍历结束之后,统一移除. 2.使用Iterato ...

  6. AngularJS展示数据的ng-bind指令和{{}} 区别

    在AngularJS中显示模型中的数据有两种方式: 一种是使用花括号插值的方式: 1 <p>{{text}}</p> 另一种是使用基于属性的指令,叫做ng-bind: 1 &l ...

  7. Java之集合的遍历与迭代器

    集合的遍历 依次获取集合中的每一个元素 将集合转换成数组,遍历数组 //取出所有的学号, 迭代之后显示学号为1004-1009 Object[] c=map.keySet().toArray();// ...

  8. java-redis集合数据操作示例(三)

    redis系列博文,redis连接管理类的代码请跳转查看<java-redis字符类数据操作示例(一)>. 一.集合类型缓存测试类 public class SetTest { /** * ...

  9. set集合的遍历（基于迭代器和增强for循环，没有一般的for循环）

    赋:开发项目中见到的代码 Java中Set集合是一个不包含重复元素的Collection,首先我们先看看遍历方法 package com.sort; import java.util.HashSet; ...

随机推荐

  1. Kafka如何删除topic？

    Kafka如何删除topic? 今天为大家带来“Kafka删除topic原理解析”,希望可以帮到那些苦于无法删除topic的朋友们. 前提条件: 在启动broker时候开启删除topic的开关,即在s ...

  2. html面页与JAVA通过webSocket 通讯

    (原) 往常前后端通讯基本都是以ajax请求或是表单做数据交互的,这是一种无状态的http协议,如果要做tcp协议的数据交互,能想到的技术也就socket了,可如果后端是JAVA,前端如何做socke ...

  3. jenkins发送生成的html报告作为邮件附件，但无内容的问题分析

  4. 5239-回忆京都-洛谷3月赛gg祭

    传送门 题目背景 第十五届东方人气投票 音乐部门 106名 第四次国内不知道东方的人对东方原曲的投票调查 51名 回忆京都副歌我tm吹爆,东方文花帖我tm吹爆! 题目描述 射命丸文在取材中发现了一个好 ...

  5. BZOJ1063 NOI2008 道路设计 树形DP

    题目传送门: BZOJ 题意精简版:给出一棵树,在一种方案中可以将树的若干链上的所有边的边权改为$0$,但需要保证任意两条链之间没有交点.问最少的一种方案,使得从根节点到其他节点经过的边的边权和的最大 ...

  6. Java Statement PK PrepareStatement

    PreparedStatement是用来执行SQL查询语句的API之一,Java提供了 Statement.PreparedStatement 和 CallableStatement三种方式来执行查询 ...

  7. Winform开发框架中的内容及文档管理模块功能介绍

    在开发项目的时候,我们有一些场景需要编辑一些HTML文档,作为内容发布系统的一部分,有时候也需要对一些文档如WORD文档进行编辑管理,这样需要我们对这些内容及文档进行合适的管理.本文主要介绍在WInf ...

  8. Java多线程编程核心技术(二)对象及变量的并发访问

    本文主要介绍Java多线程中的同步,也就是如何在Java语言中写出线程安全的程序,如何在Java语言中解决非线程安全的相关问题.阅读本文应该着重掌握如下技术点: synchronized对象监视器为O ...

  9. 网络拓扑自动发掘之三层设备惯用的SNMP OID的含义

    原文地址:https://blog.csdn.net/maty_wang/article/details/81305070 1. ipNetToMediaIfIndex Name/OID: ipNet ...

  10. 2017百度软研（C++）

    问了很多,不过很多也都没有问到,感觉有点偏,很深入的东西,越问越虚.第一次实习面试从百度开始,也从百度结束吧.看得见的差距,不想将就,所以还是拿最后一次机会去尝试.win or go home, 所以 ...