如何在AngularJS中使用ng-repeat来获取细节

在这篇文章中，我们将看到如何在Angular的ng-repeat指令的帮助下获取细节，同时通过插图了解其实现。AngularJS包含各种类型的预定义指令，其中大多数指令以ng开头，表示Angular。ng-repeat指令是用来迭代一个对象的属性的。一旦一个项目来自一个集合，一个模板就会被实例化。每个模板都有自己的范围，其中循环变量被设置为当前的集合项目，$index被设置为一个键或项目的索引。

语法:

<element ng-repeat="(key, value) in Obj"></element>

参数值:

key：它是表达式中的一个用户定义的标识符，表示项目的索引。
value：它也是一个用户定义的标识符，表示分配给表达式中特定键的值。

例子1：这个例子显示了**ng-repeat指令的基本用法，以表格的形式获取数据。

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    <title>
          Fetching the details using the ng-repeat Directive
     </title>
    <style>
        body {
            text-align: center;
            font-family: Arial, Helvetica, sans-serif;
        }
  
        table {
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
  
<body ng-app="myTable">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>
        Fetching the details using the ng-repeat Directive
    </h3>
  
    <table ng-controller="control" border="2">
        <tr ng-repeat="x in records">
            <td>{{x.Country}}</td>
            <td>{{x.Capital}}</td>
        </tr>
    </table>
  
    <script>
        var app = angular.module("myTable", []);
        app.controller("control", function ( $scope) {$ scope.records = [
                {
                    "Country": "India",
                    "Capital": "Delhi"
                },
                {
                    "Country": "America ",
                    "Capital": "Washington, D.C. "
                },
                {
                    "Country": "Germany",
                    "Capital": "Berlin"
                },
                {
                    "Country": "Japan",
                    "Capital": "Tokyo"
                }
            ]
        });
    </script>
</body>
</html>

输出:

如何在AngularJS中使用ng-repeat来获取细节？

例子2：这是另一个例子，说明在AngularJS中使用**ng-repeat指令来获取数据。

<!DOCTYPE html>
<html ng-app="myApp">
  
<head>
    <title>Angular ng-repeat</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            text-align: center;
        }
        h1 {
            color: green;
        }
        ul {
            display: inline-block;
            text-align: left;
        }
    </style>
</head>
  
<body ng-controller="MainCtrl">
    <h1>GeeksforGeeks</h1>
    <h3>
        Fetching the details using the ng-repeat Directive
    </h3>
    <h4>Sorting Algorithms:</h4>
    <ul>
        <li ng-repeat="name in names">
            {{name}}
        </li>
    </ul>
    <script>
        var app = angular.module('myApp', []);
        app.controller('MainCtrl', function ( $scope) {$ scope.names = ['Selection Sort', 
                            'Quick Sort', 
                            'Merge Sort', 
                            'Bubble Sort', 
                            'Insertion Sort'];
            console.log($scope.names);
        });
    </script>
</body>
</html>

输出:

如何在AngularJS中使用ng-repeat来获取细节？