网络技术问题 | AngularJS 测验 |第 2 组 |问题 1

介绍

AngularJS是一个流行的JavaScript MVC框架，它让我们可以轻松地构建复杂的单页Web应用程序。在使用AngularJS时，您可能会遇到一些问题，特别是在涉及网络技术的情况下。这份AngularJS测试旨在帮助您深入了解AngularJS，提高您的技能，并让您有信心解决网络技术问题。

问题描述

在使用AngularJS时，您想在控制器中获取从服务器返回的数据。您使用了$http服务发送了一个GET请求并将其存储在$scope变量中。以下是您的代码：

app.controller('MainController', ['$scope', '$http', function($scope, $http) {
  $http.get('/api/data')
    .success(function(data) {
      $scope.data = data;
    })
    .error(function(error) {
      console.log(error);
    });
}]);

现在，您想根据返回的数据在视图中渲染一个表格。您希望表格每行显示数据中的一个属性，如下所示：

| 名称 | 年龄 | 性别 | | ----- | ---- | ---- | | Alice | 25 | 女 | | Bob | 30 | 男 | | Carl | 35 | 男 |

然而，您不知道如何在AngularJS中使用ng-repeat指令来实现这一点。

请编写一个AngularJS表达式以实现此目的。

解答

您可以使用ng-repeat指令来显示从服务器返回的数据。在您的HTML中，您可以这样编写代码：

<table>
  <thead>
    <tr>
      <th>名称</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="person in data">
      <td>{{person.name}}</td>
      <td>{{person.age}}</td>
      <td>{{person.gender}}</td>
    </tr>
  </tbody>
</table>

在这个例子中，您使用了ng-repeat指令来循环遍历$scope.data变量中的所有人。然后，您在表格行中使用了AngularJS表达式来显示每个人的属性。注意，表格头是硬编码的，因为您知道每一个人都有相同的属性。

这就是如何在AngularJS中使用ng-repeat指令来显示从服务器返回的数据。Happy coding!