Question

我正在尝试使用从REST服务提供的数据进行ng-repeat迭代。

当数据是单个Json对象时，它可以正常工作，但当它成为HTML无法获取数据的对象列表时。

以下是代码：

hello.js

function Hello($scope, $http) {
$http({ method: 'GET', url: 'http://devfz.azurewebsites.net/api/providers' }).
    success(function (data) {
        $scope.providers = [data];
    }).
    error(function () {
        alert("Error");
    });
}

的index.html

<!DOCTYPE html>
<html ng-app lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/angular.min.js"></script>
<script src="js/hello.js"></script>
<title>Bootstrap 101 Template</title>
</head>

<body role="document" style="padding-top: 70px; padding-bottom: 30px">
<div class="container theme-showcase" role="main">
    <div class="jumbotron">
        <div ng-controller="Hello">
            <table class="table table-striped table-condensed">
                <thead>
                <tr>
                    <th style="min-width: 80px;">Id</th>
                    <th style="min-width: 80px;">Name</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="provider in providers">
                    <td>{{provider.id}}</td>
                    <td>{{provider.name}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>

非常感谢：）

Answer 1

您的providers数组包含一个元素：

$scope.providers = [data]; // array containing a single element: data

如果服务器返回了JSON数组，并且您想迭代该数组，那么代码应为

$scope.providers = data;

Answer 2

在控制器定义后创建数组提供程序

$scope.providers = [];

并成功回调concat数据。

.success(data) {

    $scope.providers = $scope.providers.concat(data)
}

简单的角度示例不起作用：ng-repeat + GET

2 个答案: