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. mongodb初级

    上班第一天,先玩玩mongdb! 1:下载安装就不说了 2:启动服务  mongod 通常会报错: 原因:mongodb会使用默认的数据库存储路径是data/db,刚安装好的mongodb是不存在该路 ...

  2. HIVE配置错误信息

    原因:版本问题 解决方法:cp /root/hive/lib/当前的jlinexx.jar /root/hadoop/share/hadoop/yarn/lib

  3. axios超时timeout拦截

    应用场景: 在网络请求中,可能不可避免的会遇到网络差或者请求超时的情况,这时候,如果你采用的技术是axios,那就可以通过设置拦截器捕获这个异常情况,并做出下一步处理. 代码实践: ① 设置拦截器,返 ...

  4. Linux 系统故障排查和修复技巧

    Linux 系统故障排查和修复技巧 我发现Linux系统在启动过程中会出现一些故障,导致系统无法正常启动,我在这里写了几个应用单用户模式.GRUB命令操作.Linux救援模式的故障修复案例帮助大家了解 ...

  5. (1)Python基础

    几种常用类型 int float str bool 基本数值操作 绝对值 abs 四舍五入 round 最大值&最小值

  6. UVA1627-Team them up!（动态规划）

    Problem UVA1627-Team them up! Total Submissions:3577  Solved:648 Time Limit: 3000 mSec Problem Descr ...

  7. [Algorithm] 如何正确撸<算法导论>CLRS

    其实算法本身不难,第一遍可以只看伪代码和算法思路.如果想进一步理解的话,第三章那些标记法是非常重要的,就算要花费大量时间才能理解,也不要马马虎虎略过.因为以后的每一章,讲完算法就是这样的分析,精通的话 ...

  8. 转://Oracle 单引号转义

    在ORACLE中,单引号有两个作用: 1:字符串是由单引号引用 2:转义. 单引号的使用是就近配对,即就近原则.而在单引号充当转义角色时相对不好理解 1.从第二个单引号开始被视为转义符,如果第二个单引 ...

  9. Hive窗口函数

    参考地址:https://cwiki.apache.org/confluence/display/Hive/LanguageManual+WindowingAndAnalytics 环境准备: CRE ...

  10. 三.js实例

    1.完成一个双色球,红球的自选效果 规则:1-33 用表格画出一个1到33的格子,点击一个自选按钮,将随机选中6个数字,每个表格对应的数字的背景就改为一个红球的效果 双色球.html <!DOC ...