ng-repeating时如何根据当前元素从数据库中获取数据答案

【问题标题】：How to get data from database based on current element while ng-repeatingng-repeating时如何根据当前元素从数据库中获取数据
【发布时间】：2017-08-10 10:09:31
【问题描述】：

我正在构建 spring webapp，我有一个 div 表，并希望使用 ng-repeat 在 angularjs 的 $scope 中显示数组中的一些数据。像这样的：

<div ng-repeat="element in elements>
{{element.id}}
</div>

我想要的是获取一些关于当前element 的附加数据存储在数据库的另一个表中，所以是这样的：

...
{{getImage(element.id)}}
...

我正在使用rest方法从数据库中获取数据，所以我发送get http请求并将数据存储在$scope中。

这样的事情是行不通的：

$scope.getImage = function(id){

            $http.get("services/rest/getImage/" + id).then(function(response){
                return response.data;
            },
            function(response){

            });

        }

它只是启动了发送http请求的无限循环，我认为它必须对异步javascript请求做一些事情，因为我想从数据库中获取一个元素并同时将它分配给其他东西。

那我该如何解决呢？

【问题讨论】：

为什么第一次调用api时不加载相关数据？
你的函数没有返回任何东西......它不能因为请求是异步的。不要将进行异步调用的函数放在视图中，除非它们正在对用户事件做出反应
@charlietfl 我应该创建另一个 java 类，并从多个表中加载数据并使用它，还是有另一种方法？
最简单的方法是循环通过控制器或服务中的elements 数组，并在发送到查看之前请求每个图像。当然，将其作为属性添加到原始 api 调用中是最有效的

标签： javascript angularjs spring

【解决方案1】：

您需要创建一个指令来获取 ng-repeat 中的图像并将其设置为 img 标签。我假设您在 ng-repeat 期间也从 HTTP 调用返回图像 URL 或 base64 格式数据，所以在下面的代码中我使用scope.id 来获取id：

angular.module('app').directive('imageSetter',[function() {
    return {
        restrict: "A",
        link: function(scope, element, attrs, ngModelCtrl) {
           $http.get("services/rest/getImage/" + scope.id).then(function(response){
                attrs.$set('src', response.data);
            },
            function(response){
            });
        }
    };
}]);

用法：<img src="" image-setter>

【讨论】：