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. （转）Spring Boot 2 (六)：使用 Docker 部署 Spring Boot 开源软件云收藏

    http://www.ityouknow.com/springboot/2018/04/02/docker-favorites.html 云收藏项目已经开源2年多了,作为当初刚开始学习 Spring ...

  2. 设计模式のMementoPattern（备忘录模式）----行为模式

    一.产生背景 意图:在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态. 主要解决:所谓备忘录模式就是在不破坏封装的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态, ...

  3. AlexeyAB大神版yolo 待完善

    目录 darknet优化经验 1. AlexeyAB改进项 2. Linux下编译选项 3. 训练经验 4. 提升检测效果 5. 总结 6. AlexeyAB大神改进 darknet优化经验 主要来自 ...

  4. Python 属性与方法 概念理解

    属性与方法 attribute(属性)是class(类)中的成员变量,而method(方法)则是class(类)中的function(函数). 也可以理解,属性就类变量,方法就是类函数. 类中的变量就 ...

  5. flashfxp软件设置并关联默认编辑器

    flashfxp是一款优秀的ftp应用软件,作为程序员,有时候一点小的改动,在线编辑是很方便的选择,但是flashfxp自带的编辑器像记事本一样,非常不好用.那么怎么设置关联到本地的编辑器,比如设置成 ...

  6. ASM problem : ORA-15001: diskgroup "DGROUP1" does not exist or is not mounted ORA-15040: diskgroup is incomplete

    ============================================================= mos中的详细解释: ODA: After Apply ODA 12.2.1 ...

  7. 腾讯app自动化测试读后感

    1.播放器播放视频,如何验证视频播放成功? 1.1播放时间>=0,获取Video标签里的current time判断. 1.2有播放画面,截屏获取. 框架自带的截图功能, 1.3有播放声音,获取 ...

  8. 学习使用PM2管理nodejs进程

    在项目中,偶尔对命令会忘记一下,所以在此记录下pm2的常用命令. 1. pm2是什么?pm2 是一个带有负载均衡的Node应用的进程管理器, 它能够管理Node应用,还能够对应用的运行状态进行监控. ...

  9. day93

    虚拟机安装Liunx以及Xshell链接 首先安装VMware虚拟机软件 安装完成后打开会显示 选择创建新的虚拟机 我们选择自定义 来到一个选择虚拟机兼容性 下一步安装客户端操作系统这里我们先选择稍后 ...

  10. hackbar增强版 & 在Firefox上安装未通过验证的扩展

    hackbar是Firefox的经典插件之一.介绍如下(懒得翻译了) This toolbar will help you in testing sql injections, XSS holes a ...