AngularJS集合数据遍历显示

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title>AngularJS集合数据遍历显示</title>
  6.          <script type="text/javascript" src="../js/angular.min.js"></script>
  7.      </head>
  8.      <body ng-app="myapp" ng-controller="myctrl">
  9.          <table width="100%" border="1">
  10.              <tr>
  11.                  <td>序号</td>
  12.                  <td>商品编号</td>
  13.                  <td>商品名称</td>
  14.                  <td>价格</td>
  15.              </tr>
  16.              <tr ng-repeat="product in products">
  17.                  <td>{{$index+1}}</td>
  18.                  <td>{{product.id}}</td>
  19.                  <td>{{product.name}}</td>
  20.                  <td>{{product.price}}</td>
  21.              </tr>
  22.          </table>
  23.      </body>
  24.      <script type="text/javascript">
  25.          var myapp = angular.module("myapp",[]);
  26.          myapp.controller("myctrl",["$scope",function($scope){
  27.              $scope.products = [
  28.                  {
  29.                      id:1001,
  30.                      name:'数码相机',
  31.                      price:5000
  32.                  },
  33.                  {
  34.                      id:1002,
  35.                      name:'华为手机',
  36.                      price:4000
  37.                  }
  38.              ];
  39.          }])
  40.      </script>
  41.  </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. Ajax请求中的async:false/true的作用[转]

    test.html <a href="javascript:void(0)" onmouseover="testAsync()"> asy.js f ...

  2. （转）Spring Boot 2(一)：【重磅】Spring Boot 2.0权威发布

    http://www.ityouknow.com/springboot/2018/03/01/spring-boot-2.0.html 就在今天Spring Boot2.0.0.RELEASE正式发布 ...

  3. F. Graph Without Long Directed Paths Codeforces Round #550 (Div. 3)

    F. Graph Without Long Directed Paths time limit per test 2 seconds memory limit per test 256 megabyt ...

  4. Python 中两个字典（dict）合并

    dict1 = { "name":"owen", "age": 18 } dict2 = { "birthday": & ...

  5. 解决y7000笔记本ubuntu下wifi无法连接问题

    查看wifi与蓝牙硬件开关,发现ideapad的硬件模块都是关闭的 rfkill list all 打开终端 输入 sudo gedit /etc/rc.local 写入以下内容 进行保存 #!/bi ...

  6. [python] RRT快速拓展随机树

    """ version1.1,2018-05-09 <基于智能优化与RRT算法的无人机任务规划方法研究>博士论文 <基于改进人工势场法的路径规划算法研究 ...

  7. MYSQL学习笔记——sql语句优化工具

    优化sql:思路: 使用explan->先查询type类型看看是all还是ref,然后判断 possible_keys (显示可能应用在这张表中的索引, 一个或多个.查询涉及到的字段是若存在索引 ...

  8. 已使用.netframework,version=v4.6.1 而不是目标框架netcoreapp,version=v2.1 还原包，此包可能与项目不完全兼容

    已使用.netframework,version=v4.6.1 而不是目标框架netcoreapp,version=v2.1 还原包,此包可能与项目不完全兼容 NU1202: 包 System.Run ...

  9. Python 中的浅拷贝和深拷贝

    1. 列表和字典,直接赋值,都是浅拷贝,即赋值双方指向同一地址,因为 Python 对可变对象按引用传递. >>> a = [1, 2, 3] >>> b = a ...

  10. linux初次入门学习小结

    linux系统目录结构: 通过ls / 命令可以获得linux目录结构 bin boot dev etc home lib lib64 media mnt opt proc root sbin sel ...