AngularJS集合数据遍历显示的实例


Posted in Javascript onDecember 27, 2017

如下所示:

<!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>
Javascript 相关文章推荐
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
javascript操作css属性
Dec 30 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
Vue+webpack实现懒加载过程解析
Feb 17 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 Javascript
深入解读VUE中的异步渲染的实现
Jun 19 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 Javascript
一文帮你理解PReact10.5.13源码
Apr 03 Javascript
vue项目支付功能代码详解
Feb 18 Vue.js
vue.js整合mint-ui里的轮播图实例代码
Dec 27 #Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 #Javascript
Vue 过滤器filters及基本用法
Dec 26 #Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 #Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 #Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 #Javascript
Webpack实战加载SVG的方法
Dec 26 #Javascript
You might like
PHP脚本的10个技巧(7)
2006/10/09 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
html数组字符串拼接的最快方法
2009/09/16 Javascript
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
Python中获取网页状态码的两个方法
2014/11/03 Python
python中__slots__用法实例
2015/06/04 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
Python引用计数操作示例
2018/08/23 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
python matplotlib库的基本使用
2020/09/23 Python
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
养生餐厅创业计划书范文
2014/03/26 职场文书
高中校园广播稿
2014/10/21 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
社团招新宣传语
2015/07/13 职场文书
学风建设主题班会
2015/08/17 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书
表扬信范文
2019/04/22 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
Redis实现分布式锁的五种方法详解
2022/06/14 Redis