如何在AngularJS中用ng-repeat遍历键和值

任务是使用ng-repeat指令对一个JS对象（其键和值）进行迭代。这可以使用ng-repeat指令中的括号来明确要求angularJS提供一个键值对参数。这里的变量key包含对象的key，value包含对象的value。

语法:

<element ng-repeat="(key, value) in JSObject">
     Contents... 
</element>

例子1：在这个例子中，我们将使用ng-repeat简单地显示一个JS对象的所有键和值。在第一次迭代中，key = name，value = “GeeksforGeeks”。在第二次迭代中，key = location and value = “Noida India Sector 136″……这样不断迭代，直到所有的键和它们的值至少被覆盖一次，类似于for-each循环。

<!DOCTYPE html>
<html ng-app="myApp">
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
    </script>
</head>
  
<body ng-controller="MyController">
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h3>
           Iterating the keys & values with ng-repeat in AngularJS 
        </h3>
        <div ng-repeat="(key, value) in gfg">\
          
            <!-- First Iteration-->
            <p>{{key}} - {{value}}</p>
        </div>
    </center>
    <script type="text/javascript">
        var myApp = angular.module('myApp', []);
        myApp.controller('MyController', ['scope', function(scope) {
            $scope.gfg = {
                Name: "GeeksforGeeks",
                Location: "Noida India Sector 136",
                Type: "Edu-Tech",
            }
        }]);
    </script>
</body>
</html>

输出：在加载页面时，我们看到所有对象的键值对都已经列在那里。这是因为在加载HTML时，ng-repeat被调用。

如何在AngularJS中用ng-repeat遍历键和值？

例子2：在这个例子中，我们将使用ng-repeat指令对一个嵌套对象进行循环。在第一次迭代中，键=钻石，值={硬度: “Ultra Hard”, goodFor: “Display, cutting”}在下一次迭代中，键=黄金，值是其各自的对象。这就像一个for-each循环一样不断地在对象材料的键值对上进行迭代。

<!DOCTYPE html>
<html ng-app="myApp">
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
    </script>
</head>
  
<body ng-controller="MyController">
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h3>
           Iterating the keys & values with ng-repeat in AngularJS 
        </h3>
        <div ng-repeat="(key, value) in materials">
            <h1>{{key}}</h1>
            <div ng-repeat="(key1, value1) in value">
                  
                <!-- since the "value" variable itself is
                an object. We can iterate over its keys
                and values again using ng-repeat. -->
                <p>{{key1}} - {{value1}}</p>
            </div>
        </div>
    </center>
    <script type="text/javascript">
    var myApp = angular.module('myApp', []);
        myApp.controller('MyController', ['scope', function(scope) {
            $scope.materials = {
                diamond: {
                    hardness: "Ultra Hard",
                    goodFor: "Display, cutting"
                },
                gold: {
                    hardness: "Hard",
                    goodFor: "Jewelry"
                },
                silver: {
                    hardness: "comparatively soft",
                    goodFor: "Jewelry, Display"
                }
            }
        }]);
    </script>
</body>
</html>