Javascript 在AngularJS中，如何独立呈现列表中的不同项

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

我已经创建了一个plunk，展示了如何使用服务和指令来实现您所说的结果。关键是在指令链接时，id与指令关联。然后，detailId上的$watch被用来触发第二个调用

要在整个项目中使用此功能，您必须更新服务以使用$http或$resource调用从服务器获取内容。

您不能（意味着真的不应该）引用模板中的AJAX调用包装函数。不管它不是“角度方式”（模板不应该弄乱数据，ng repeat就是调用ajax函数的方式），它都会中断，因为您正在为每个渲染周期进行ajax调用（并且为返回的数组中的每个元素再调用一次！）

您应该能够（并且很可能希望）控制何时从后端/API获取信息，并使用它进行工作，直到您想要刷新它/提交任何更改。因此，要做的主要事情是改变：

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

这样做的目的是在实例化控制器时调用AJAX请求一次

<>你可以为ReultDeLigBuffor做同样的事情，但是考虑它是否值得。只有当主要结果不太可能改变（每次改变时，请求都会重复）或者细节代表大量数据时，才应该将这些调用分开，并且您确实需要快速显示结构，只有这样，细节才会显示出来

同时，只考虑调用元素的细节，例如，用户“打开它”。

编辑、回复以下评论

正如我所说的，您应该将信息（模型以及获取和更新模型的AJAX请求）与模板和显示分离开来。也就是说，你需要决定什么是最好的：

• 您可以预先获取所有信息，然后进行过滤（仅过滤显示的信息）或
• 您可以从后端获取一组经过筛选的元素

在第二种情况下，您仍然应该控制AJAX调用发生的频率。例如，您可以监视筛选器变量（使用$scope.$watch（）），并在发生这种情况时调用$http服务：

（在resultController中：）

我要指出的是，每次您在过滤器“搜索框”中键入内容时，都会发出一个新的请求（例如，如果“beac”请求在“beach”请求之后返回，那么这可能会过份，甚至会导致错误的结果）。一种可能的解决方案是在您键入时实现覆盖上一个的超时（搜索只在您停止键入后0.5秒开始）

---

您直接将模型设置为函数调用，这是不典型的。（我以前从未见过这种情况）。大多数情况下，您会看到

ng repeat=“result in results”

，其中

results

实际上是在控制器中定义的，例如

$scope.results=getResults（）。但是，您也应该发布一些控制器代码或工厂/服务代码，以便获得完整答案。好的，也发布控制器代码。+1获取代码和解释。虽然不确定它是否解决了我的问题，但我也不知道如何在现有代码中使用指令。是否可以将总共10个result.id的数组发送到getDetails（）。因为getDetails（）的服务可以接受多个逗号分隔格式的结果。这样，不会为每个结果调用getDetails，性能将在可接受的范围内。我的项目列表范围是10-30个结果。因此，在最坏的情况下，getDetails只会被触发3次，而不是30次。在这种情况下，我会将列表发送给一个函数，如get details，但是我不会让getDetails做这项工作，相反，我会让$resource查询获取集合，并且仍然有一个不同的get detail函数，该函数从内存变量中提取（仍在服务中）对于每个细节。您不一定需要指令，但是您确实需要服务加上控制器中的手表来执行后期绑定回调。哦，至于如何使用指令，请将它们视为包装块，以包含您重复执行的部分功能。它们用于创建更具语义的cod创建方法e、 正如Misko Henvry所说，angular教授了浏览器新的技巧。它可以做到这一点，但允许您创建独立的代码块（指令），这些代码块可以作用于应用程序并为应用程序创建新的语法。实际上，我试图缩小所讨论的代码示例getResults（）在我的项目中，也有一些基于用户输入的过滤，并且每次都需要刷新以遵守用户的过滤参数。问题仍然存在-您需要能够告诉angular何时需要刷新（您真的不想每秒执行30多个请求！）我将编辑我的答案以包含一个示例。感谢您的编辑和回答。为了澄清，我认为当页面加载时，只会调用一次GetResults，但是，getDetails（result）将被调用30多次，这是我提出并希望避免的主要问题。在我的情况下，“getDetails”是所有服务中最慢的，因为它需要在后端进行所有计算。而且，我仍然需要在屏幕上向用户显示每个结果的详细信息，因为没有该结果是无关的。看起来您将从中受益后端优化（将结果记录为缓存信息等），但这只是一种感觉，超出了您的问题范围。您的初始代码是错误的，因为它导致多次发出相同的请求，我的回答似乎解决了这一问题。除此之外，这是一个策略和规划问题
<li ng-repeat="result in getResults()" ng-controller="resultController"> 

<li ng-repeat="result in myResults" ng-controller="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();

};

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

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