AngularJs - 数据未显示在ng-repeat中

I am trying a simple Spring MVS AngularJs REST application. All I am doing is fetching a list of customers from the database and passing it to the AngularJs controller.

我正在尝试一个简单的Spring MVS AngularJs REST应用程序。我所做的就是从数据库中获取客户列表并将其传递给AngularJs控制器。

In the AngularJs controller, while logging, I can see the promise and the data come through but for some reason the ng-repeat in the view does not pick it up. What am I doing wrong?

在AngularJs控制器中，在记录时，我可以看到承诺和数据通过，但由于某种原因，视图中的ng-repeat没有获取它。我究竟做错了什么？

Spring Controller...

弹簧控制器......

@RequestMapping(value = "/cust_list", method = RequestMethod.GET)
public ModelAndView getAllCustomers(Model model) {
    return new ModelAndView("cust_list", "listCustomers", getCustomers());
}

Angular...

角...

angular.module('lilmoApp', ["ngResource"])

// service
.factory('CustomerService', ['$resource', function($resource) {
    return $resource('/lilmo/cust_list').get();
}])

//controller
.controller('CustomersListController', ['$scope', '$resource', 'CustomerService', function ($scope, $resource, CustomerService) {
    $scope.customers = [CustomerService] 
    console.log($scope.customers);
}]);

HTML view...

HTML视图......

<table class="table table-bordered table-striped">
    <tbody>
        <tr ng-repeat="customer in customers">
            <td>{{customer.firstName}}</td>
            <td>{{customer.lastName}}</td>
        </tr>
    </tbody>
</table>

This is the javascript console with the data...

这是带有数据的javascript控制台......

Though the data is coming through, it does not show up in the view, using the ng-repeat. Any help is appreciated. Thanks in advance.

虽然数据正在通过，但它不会在视图中显示，使用ng-repeat。任何帮助表示赞赏。提前致谢。

2 个解决方案

#1

the other answer is almost the solution BUT you are setting

另一个答案几乎是解决方案，但你正在设置

$scope.customers = [CustomerService];

so its a array and index 0 is CustomerService you could set as

所以它的数组和索引0是你可以设置的CustomerService

$scope.customers = CustomerService;

and use

并使用

<tr ng-repeat="customer in customers.listCustomers">

otherwise without changes use

否则无需更改

<tr ng-repeat="customer in customers[0].listCustomers">

#2

It looks like your api result puts the customers inside a listCustomers child. This is useful because the $resource object attaches promise related fields to the root, so putting the actual data on a child makes it more clear. With that in mind, try this in your html:

看起来您的api结果将客户置于listCustomers子项中。这很有用，因为$ resource对象将与promise相关的字段附加到根目录，因此将实际数据放在子项上会使其更清晰。考虑到这一点，请在您的html中尝试：

<tr ng-repeat="customer in customers.listCustomers">

It just looks like the ng-repeat is referencing the wrong array.

看起来ng-repeat正在引用错误的数组。

Update, as Johan said, you are placing the service into an array, so your $scope assignment needs to be updated as well by removing the unnecessary brackets.

正如Johan所说，更新，您将服务放入一个数组中，因此您的$ scope赋值也需要通过删除不必要的括号来更新。

#1