如何在嵌套的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>

该代码的结果是:

程序1
      章节标题4
      章节标题5
程序2
      章节标题4
      章节标题5

但我正在寻找这个结果:

程序1
      部分标题1
      部分标题2
      部分标题3
程序2
      部分标题4
      部分标题5

注意:当我检查浏览器日志时,我发现部分服务可以为每个程序正确获取结果.

Answer 1

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

现在 - 你的问题是你做了2次异步调用并将两个结果放在同一个变量上:$scope.section显然两个ng-repeatdiv都会显示相同的数据.

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

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

在你的控制器中:

$scope.section = [];

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

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

HTML函数名称和控制器函数名称不匹配,我猜它是你的错字.

解决问题的另一种方法(我和评论员最好)是将您的部分数据存储在程序本身下面:

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

在你的控制器中:

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

        programme.section = data;
    });
 };