简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

How to traverse and display collection data in Angular

php中世界最好的语言
Release： 2018-04-13 14:06:34
Original
2421 people have browsed it

This time I will show you how to traverse and display collection data in Angular. What are the precautions? Here is a practical case, let’s take a look at it together. .

is as follows: 

<!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>
Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related matters on the php Chinese website article!

Recommended reading:

Detailed explanation of the steps for using the custom paginator in Swiper

How to switch the arrow buttons in the swiper plug-in

The above is the detailed content of How to traverse and display collection data in Angular. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
angular data Traverse
source：php.cn
Previous article：How to configure the React Native development environment in VSCode Next article：How vue.js uses mint-ui carousel component
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Angular 7 remove duplicate attributes in SCSS AngularSASS (.scss) strips properties. How do I prevent this from happening so I can embed...
From 2024-04-04 23:28:54
0
1
1382
An error is thrown when importing Javascript prototype constructor in Angular application I have an Angular application where I'm trying to import a JS file that has a constructor....
From 2024-04-04 11:36:15
0
1
288
Generating content using Ajax - scrolling to Id doesn't work I generate page content based on data obtained via ajax. The problem I'm having is that wh...
From 2024-04-04 09:29:39
0
1
397
Create a circular SVG temperature dragger in Angular? Here is a static demonstration of a circular thumb dragger I'm trying to create in Angular...
From 2024-04-03 09:33:29
0
1
376
Angular: Property binding to understand text element color lacks reactivity The following is my .ts file, import{Component}from'@angular/core';@Component({selector:'a...
From 2024-04-01 17:28:52
0
1
358
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！