如何使用ng repeat angularjs迭代json集合

使用ng-repeat指令可以在AngularJS中迭代JSON集合。ng-repeat指令可以在HTML模板中重复渲染一个元素或一组元素，根据给定的集合数据。

下面是使用ng-repeat迭代JSON集合的步骤：

1. 在HTML模板中，使用ng-repeat指令来迭代JSON集合。指令的语法是ng-repeat="item in collection"，其中item是集合中的每个元素，collection是要迭代的JSON集合。
2. 在ng-repeat指令所在的元素上，使用双大括号语法{{ item.property }}来显示集合中的每个元素的属性值。这里的property是JSON对象中的属性名。

下面是一个示例，展示如何使用ng-repeat迭代JSON集合：

<div ng-app="myApp" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="person in people">{{ person.name }}</li>
  </ul>
</div>

<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
    $scope.people = [
      { name: 'John', age: 25 },
      { name: 'Jane', age: 30 },
      { name: 'Bob', age: 35 }
    ];
  });
</script>

在上面的示例中，ng-repeat指令用于迭代people集合中的每个person对象。在每次迭代中，使用{{ person.name }}来显示person对象的name属性值。最终，会生成一个包含三个li元素的无序列表，分别显示John、Jane和Bob的名字。

对于更复杂的JSON集合，可以使用嵌套的ng-repeat指令来迭代多层级的数据结构。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云官网：https://cloud.tencent.com/
• 云服务器CVM：https://cloud.tencent.com/product/cvm
• 云数据库MySQL：https://cloud.tencent.com/product/cdb_mysql
• 云存储COS：https://cloud.tencent.com/product/cos
• 人工智能AI：https://cloud.tencent.com/product/ai
• 云原生容器服务TKE：https://cloud.tencent.com/product/tke