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 相关文章推荐
动态为事件添加js代码示例
Feb 15 Javascript
JavaScript学习笔记(十七)js 优化
Feb 04 Javascript
js常用排序实现代码
Dec 28 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 Javascript
Vue弹出菜单功能的实现代码
Sep 12 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 Javascript
详解jQuery中的prop()使用方法
Jan 05 jQuery
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 Javascript
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中数组首字符过滤功能代码
2012/07/31 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
永不消失的title提示代码
2007/02/15 Javascript
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
javascript用函数实现对象的方法
2015/05/14 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
[41:05]Serenity vs Pain 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python读写ini配置文件方法实例分析
2015/06/30 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
简单了解python PEP的一些知识
2019/07/13 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
python求解汉诺塔游戏
2020/07/09 Python
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
《母亲的恩情》教学反思
2014/02/13 职场文书
班组长岗位职责
2014/03/03 职场文书
电子信息工程自荐信
2014/05/26 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL