javascript - 在 AngularJS 中如何独立呈现列表的不同项目

Question

我是 AngularJS 的新手，即使花了几个小时我也无法在互联网上找到以下问题的答案。

请随时提出更好的方法，我在下面正在尝试。

查看我的 AngularJS 工作进度代码:

<li ng-repeat="result in getResults()" ng-controller="resultController"> 
 <div class="name_style">
  {{result.name}}
 </div>

  <!--fetch more details for each result and set to $scope.resultDetail-->
 <div class="name_detail_style" ng-bind=getDetails(result.name) ng-controller="resultDetailController">
  {{resultDetail.image}}
  {{resultDetail.description}}
 </div>

</li>    

为简洁起见，我试图简化上面的内容。

我试图分两部分呈现结果列表:

1. getResuls() 进行休息服务调用以获取结果数组。

2. 然后 getDetails(result) 进行另一个服务调用以获取特定结果的更多详细信息。

它运行得非常慢，因为 AngularJS 试图同时呈现名称和它的详细信息。我希望名称一可用就呈现，并在 getDetail() 服务调用有机会获得响应时呈现详细信息。

我不知道是否/如何使用此解决方案 How to load data asynchronously using AngularJS with SpringMVC?

如果您还需要查看 Controller 端代码，请告诉我。

编辑 也添加 Controller 代码示例。请原谅手动重新创建以下代码时出现的任何拼写错误。

function resultController($scope, $http) {
    $scope.getResults = function() {

        $http({method: 'GET', url: resultURL=  timeout: maxTime})
            .success(function (data, status, headers, config) {
               console.log(data);
               $sope.result=data;     
            })

            .error(function (data, status, headers, config) {
                if (status == 0) {
                    serviceTimedoutError($scope, data, status, config);
                } else {
                    serviceFailure($scope, data, status, config);
                }
            })
    };

};



function resultDetailController($scope, $http) {
    $scope.getDetails = function(result) {
          resultDetailsURL=resultDetailsUR+"/"+result  
        $http({method: 'GET', url: resultDetailsURL=  timeout: maxTime})
            .success(function (data, status, headers, config) {
               console.log(data);
           $sope.resultDetails={"image":data["image"],"description":data["description"]};     
            })

            .error(function (data, status, headers, config) {
                if (status == 0) {
                    serviceTimedoutError($scope, data, status, config);
                } else {
                    serviceFailure($scope, data, status, config);
                }
            })
    };

};

Answer 1

您不能(意思是真的不应该)在模板中引用本质上是 AJAX 调用包装函数的内容。没关系，它不是“Angular 方式”(模板不应该弄乱数据，而你的 ng-repeat 就是调用 ajax 函数的东西)，它会中断，因为你正在进行 AJAX 调用(每个都调用一个)返回数组中的元素!)对于每个渲染周期!

您应该能够(并且很可能会想要)控制您何时想要从您的后端/API 获取信息，并使用它直到您想要刷新它/提交任何更改。所以，主要要做的是改变:

<li ng-repeat="result in getResults()" ng-controller="resultController"> 

到

<li ng-repeat="result in myResults" ng-controller="resultController"> 

和 resultController 到:

function resultController($scope, $http) {
    $scope.getResults = function() {

        $http({method: 'GET', url: resultURL=  timeout: maxTime})
            .success(function (data, status, headers, config) {
               console.log(data);
               $sope.result=data;     
            })

            .error(function (data, status, headers, config) {
                if (status == 0) {
                    serviceTimedoutError($scope, data, status, config);
                } else {
                    serviceFailure($scope, data, status, config);
                }
            })
    };

    $scope.myResults = $scope.getResults();

};

它的作用是在实例化 Controller 时调用 AJAX 请求一次。

然后您可以对 resultDetailController 执行相同的操作，但请考虑这样做是否值得。只有当主要结果不太可能发生很大变化(每次它们发生变化，请求都会重复)，或者细节代表大量数据，并且您确实需要快速显示结构时，您才应该将这些调用分开，只有这样，细节。

此外，考虑仅在例如用户“打开它”时调用元素的详细信息。

编辑，对以下评论的回应

正如我所说，您应该真正将信息(模型以及获取和更新它的 AJAX 请求)与模板和显示分开。也就是说，您需要决定什么是最好的:

• 您可以预先获取所有信息，然后过滤(仅过滤显示的内容)或
• 您可以从后端获取一组经过过滤的元素

在第二种情况下，您仍然应该控制 AJAX 调用发生的频率。例如，您可以观察过滤器变量(使用 $scope.$watch() )并在发生这种情况时调用 $http 服务:

(在结果 Controller 中:)

$scope.$watch("filterString", function(){
  $scope.myResults = $scope.getResults($scope.filterString);
}

我会注意到，每次您在过滤器“搜索框”中输入内容时，都会发出一个新请求(这可能会过度杀伤甚至导致错误结果 - 如果“beac”请求返回 例如，在请求“海滩”之后)。一种可能的解决方案是在您键入时实现一个覆盖先前超时的超时(搜索仅在您停止键入后 .5 秒内开始)

$scope.$watch("filterString", function(){
  $scope.getResultsTimeout.cancel();
  $scope.getResultsTimeout = $timeout(
    function(){
      $scope.myResults = $scope.getResults($scope.filterString);
    },
    500);
}