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-repeat div都会显示相同的数据。

解决这个问题的一种方法是你可以使$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;
    });
 };

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

1 个答案: