Question

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

在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.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视图...

<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>

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

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

Answer 1

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

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

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

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

Answer 2

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

$scope.customers = [CustomerService];

所以它的数组和索引0是您可以设置为

的CustomerService

$scope.customers = CustomerService;

并使用

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

否则无需更改

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

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

2 个答案: