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>

您可能感兴趣的文章:

  • Angular ng-repeat 对象和数组遍历实例
  • AngularJS遍历获取数组元素的方法示例
赞 (0)

相关推荐

  • AngularJS遍历获取数组元素的方法示例

    AngularJS遍历获取数组元素的方法示例

    本文实例讲述了AngularJS遍历获取数组元素的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取数组的元素例子</title> <script src="angular.min.js"></script> <s

  • Angular ng-repeat 对象和数组遍历实例

    直接上代码 <!DOCTYPE html> <html> <head> <meta name="description" content="[Ngrepeat in obj and arr]"> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script

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

    如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS集合数据遍历显示</title> <script type="text/javascript" src="../js/angular.min.js"></script> </head> <

  • python读取查看npz/npy文件数据以及数据完全显示方法实例

    python读取查看npz/npy文件数据以及数据完全显示方法实例

    目录 python读取npz/npy文件 python查看npz/npy文件 附:python-读取和保存npy文件示例代码 总结 python读取npz/npy文件 npz和npy文件都可以直接使用numpy读写. import numpy as np ac = np.load('mydata.npz') ac.files python查看npz/npy文件 要查看其中某一项的数据: M = ac['M'] M 显示的值带省略号,要完全显示,执行: np.set_printoptions(th

  • AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题

    本文实例讲述了AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题.分享给大家供大家参考,具体如下: 我们可以使用ng-repeat指令遍历一个JavaScript数组,当数组中有重复元素的时候,AngularJS会报错: Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. R

  • Java使用Iterator迭代器遍历集合数据的方法小结

    本文实例讲述了Java使用Iterator迭代器遍历集合数据的方法.分享给大家供大家参考,具体如下: 1.使用迭代器遍历ArrayList集合 package com.jredu.oopch07; import java.util.ArrayList; import java.util.Iterator; import java.util.List; public class Ch05 { public static void main(String[] args) { // TODO Auto

  • Angularjs的$http异步删除数据详解及实例

    Angularjs的$http异步删除数据详解及实例 有人会说删除这东西有什么可讲的,写个删除的service,controller调用一下不就完了. 嗯...看起来是这样,但是具体实现起来真的有这么简单吗?首先有以下几个坑 怎么确定数据是否删除成功? 怎么同步视图的数据库的内容? 1.思路 1.实现方式一 删除数据库中对应的内容,然后将$scope中的对应的内容splice 2.实现方式二 删除数据库中对应的内容,然后再reload一下数据(也就是再调用一次查询方法,这种消耗可想而知,并且还要

  • PHP实现数据分页显示的简单实例

    分页在后台管理中是经常使用的功能,分页显示方便大量数据的管理. 实例代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>用户列表</title> </head> <body> <?php $con = mysql_connect("localhost","root",

  • PyTorch读取Cifar数据集并显示图片的实例讲解

    首先了解一下需要的几个类所在的package from torchvision import transforms, datasets as ds from torch.utils.data import DataLoader import matplotlib.pyplot as plt import numpy as np #transform = transforms.Compose是把一系列图片操作组合起来,比如减去像素均值等. #DataLoader读入的数据类型是PIL.Image

  • Django读取Mysql数据并显示在前端的实例

    前言: 由于使用Django框架来做网站,需要动态显示数据库内的信息,所以读取数据库必须要做,写此博文来记录. 接下来分两步来做这个事,添加网页,读取数据库: 一.添加网页 首先按添加网页的步骤添加网页,我的网页名为table.html, app名为web: table.html放到相应目录下: forms.py文件提前写好: 修改views.py,做好视图 from django.shortcuts import render from web import forms def table(r

  • 在angularJs中进行数据遍历的2种方法

    2种方式分别为: 1.数组数据遍历 2.对象数据遍历 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="angular.min.js"></script> </head> <body> <div ng-app="module"

  • layui-table对返回的数据进行转变显示的实例

    在使用layui表格时,在ajax请求回来的数据,有时候需要我们处理之后显示 1.比如性别sex这个字段,后台可能返回的是1.或者 2:那我们总不能显示1.和 2,我们需要显示男和女,这里就用到了自定义模板了 <script type="text/html" id="barDemo"> {{#if (d.sex == 1) { }} <span>男</span> {{# }else if(d.sex == 2){ }} <s

随机推荐