angularjs - 如何在嵌套的 ng-repeat 指令中显示数据

Question

我有两个对象，程序和部分，每个程序都有一些部分我有两个服务，第一个服务显示所有程序，第二个服务显示一个程序的所有部分，问题是:我无法使用程序代码作为参数显示一个程序的每个部分，这是我的代码:

var app=angular.module("myApp",[]);
app.controller("myController",function($scope,$http){

    $scope.programme=null;
    $scope.section=null;

   $http.get("/programmes").success(function(response) {
        $scope.programme = response;
    });


    //getting sections for one programme using code
   $scope.getSectionByCode = function(code)
    {   
       $http.get("/listsections/"+code).success(function(data){

          $scope.section = data;
       });
    }; 

});

HTML

<div class="padd" ng-app="myApp" 
                  ng-controller="myController">
      <ul>
        <li ng-repeat="x in programme" 
            ng-init="getSectionByProgCode(x.code)" >
                {{x.titre}}
            <ul>
              <li ng-repeat="s in section">{{s.title }}</li>
            </ul>
        </li> 
      </ul>
    </div>

这段代码的结果是:

节目一
章节标题 4
章节标题 5
节目二
章节标题 4
章节标题 5

但我正在寻找这个结果:

节目一
章节标题 1
章节标题 2
章节标题 3
节目二
章节标题 4
章节标题 5

注意:当我检查我的浏览器日志时，我发现该部分的服务为每个程序正确地获取了结果。

Answer 1

首先，我建议您阅读有关如何正确构建您的应用程序的信息，例如在服务中放置 http 调用，在服务中存储数据等。

现在 - 你的问题是你做了 2 个异步调用并将两个结果放在同一个变量上:$scope.section，所以很明显 ng-repeat div 将显示相同的数据。

解决这个问题的一种方法是，您可以将 $scope.section 变量设为数组并按索引存储:

ng-init="getSectionByProgCode(x.code, $index)"

在你的 Controller 中:

$scope.section = [];

$scope.getSectionByCode = function(code, index)
{   
   $http.get("/listsections/"+code).success(function(data){

      $scope.section[index] = data;
   });
};

HTML 函数名称和 Controller 函数名称不匹配，我猜这是你的错字。

解决它的另一种方法(我和其他评论员更喜欢)，是将您的部分数据存储在程序本身下:

<li ng-repeat="x in programme" 
       ng-init="getSectionByProgCode(x)" >
              {{x.titre}}
     <ul>
         <li ng-repeat="s in x.section">{{s.title}}</li>
     </ul>
</li> 

在你的 Controller 中:

$scope.getSectionByProgCode = function(programme)
{   
    $http.get("/listsections/" + programme.code).success(function(data){

        programme.section = data;
    });
 };