如何使用angularJS以表格格式打印数组？

在JavaScript中，数据可以以数组的形式存储。每个数组项都有从0开始的唯一索引。但是，如果开发人员希望在网页上显示数组中的所有项，该怎么办。一种可能的方法是运行一个循环，从0到(array.length()– 1)的值开始循环。但是，在处理JSON数据时这是不可行的，在JSON数据中，现有数组中可能存在另一个数组。

AngularJS提供了最好的解决方案。
可以使用AngularJS的’ng-repeat’指令以表格格式打印数组。
“ ng-repeat”有助于循环遍历collection元素中的项目。该指令在处理对象集合时非常有帮助。

范例1：

  

    body {
        margin: 2%;
        font-size: 120%;
    }
      
    th,
    td {
        padding: 20px;
    }

  

    Most Grand Slam Winners - Men Tennis
    
        
            
                
                
                
                
                
            
        
        
            
            
            
            
            
        
    S.NoNameCountryGrand SlamsActive {{item.sno}}  {{item.name}}  {{item.country}}  {{item.grandslams}}  {{item.active}} 
  


    var app = angular.module('myApp', []);
    app.controller(
      'ListController', function($scope) {
  
        $scope.itemsDetails = [{
                sno: 1,
                name: 'Roger Federer',
                country: 'Switzerland',
                grandslams: 20,
                active: "Yes",
            }, {
                sno: 2,
                name: 'Rafael Nadal',
                country: 'Spain',
                grandslams: 18,
                active: "Yes",
            }, {
                sno: 3,
                name: 'Novak Djokovic',
                country: 'Serbia',
                grandslams: 16,
                active: "Yes",
            }, {
                sno: 4,
                name: 'Pete Samprass',
                country: 'USA',
                grandslams: 14,
                active: "No",
            }, {
                sno: 5,
                name: 'Roy Emerson',
                country: 'Australia',
                grandslams: 12,
                active: "No",
            }
  
        ];
  
    });

  

输出

代码说明：
此应用程序的“ ng-app”和“ ng-controller”已分别命名为“ myApp”和“ ListController” 。
在             

Superheroes and their Universe

                                                                                                                                   

Name	Universe
{{item.name}}	{{item.universe}}

     

输出：

代码说明：
这个例子与前面的例子非常相似。在这种情况下，我们创建了一个数组并将其命名为‘itemsDetails’ 。我们将把这个数组存储在scope对象中。 “ ng-repeat”服务将遍历数组，一次从数组中获取一项，然后以表格格式将其显示在网页上。