帶回調成ng-repeat元素的Ajax請求Angular.js

Question

我目前正在學習使用Angular.js編寫代碼，我正在做一個項目，其中使用Ajax查詢加載信息。

要長話短說，我有三個層次DATAS

的

- 技能（能力）

---指標（indicateurs）

----結果（resultats）

我有第一個跟蹤當前技能的技能和指標的請求。

HTML

<div ng-controller="AdminController" data-ng-init="listAllCompetences()"> 

    <!-- Level 1 --> 
    <div data-ng-repeat="competence in competences" class="content level1 topcompetence" id="competence_{{competence.Competence.id}}"> 

     <div class="level1_title_box"> 
      <h3 class="h3 titre_competence" ng-hide="editorEnabled">{{$index + 1}} - {{competence.Competence.description}} </h3> 
     </div> 

     <p><b>Indicateurs de performances : </b></p> 

     <!-- Level 2 --> 
     <div data-ng-repeat="indicateur in competence.Indicateur" class="content level2" id="indicateur_{{indicateur.id}}"> 

      <div class="level2_title_box"> 
       <h4>{{$index + 1}} - {{indicateur.description}}</h4> 
      </div> 

      <p><b>Results : </b></p> 

      <p><a ng-click="listAllRestulatsByIndicateurId(indicateur.id)" href="javascript:void(0);">Click here to show results</a></p> 

      <!-- Level 3 --> 
      Level 3 shoudl be displayed there... 
      <!-- End Level 3 --> 

      <pre>{{resultatsAttendusCallback}} {{resultatsAttendusCallback.length}}</pre> 

     </div> 
     <!-- End Level 2 --> 
    </div> 
    <!-- End Level 1--> 
</div> 

當我點擊listAllRestulatsByIndi​​cateurId（indicateur.id）;函數，有一個Ajax請求獲取給定指標的所有結果。

我還沒有弄清楚的一點是我怎麼知道在哪裏輸出這個信息，因爲我可以有很多指標。

我的角度功能

$scope.listAllRestulatsByIndicateurId = function(indicateurID) { 

      console.log(indicateurID); 

      var req_resultats_by_indicateur = { 
       method: 'POST', 
       url: '../api/resultatAttendus/listByIndicateur', 
       headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 
       data: { 
        indicateur_id: indicateurID 
       } 
      } 

      console.log(req_resultats_by_indicateur); 

      $http(req_resultats_by_indicateur).then(function successCallback(callback) { 

       if(callback.data.status == 'success') { 

        $scope.resultatsAttendusCallback = callback.data.data; 
        console.log(callback); 
       } 

       if(callback.data.status == 'error') { 
        console.log(callback) 
       } 

      }); 
    } 

注：使用回撥，可能是壞的，我把它命名。它是從我的ajax調用返回的數組。

此行$scope.resultatsAttendusCallback = callback.data.data;爲我提供了指標ID爲父項的結果數組。

但是當我執行這個函數時，所有的{{resultatsAttendusCallback}}或者結果空間都在寫數組。我只是想讓結果打印在我點擊的指示器ID中。

有什麼辦法歸因任何種類的ID或類名的那些元素，所以我可以知道至極元素上工作，獲得角回調的工作？

Answer 1

您可以將當前indicateur傳遞給函數（對象本身，而不是它的ID）並將數據直接附加到該對象，然後在視圖中，您需要顯示附加到該對象的返回數據由AJAX請求對象：

<!-- Level 1 --> 
<div data-ng-repeat="competence in competences" class="content level1 topcompetence" id="competence_{{competence.Competence.id}}"> 

    <div class="level1_title_box"> 
     <h3 class="h3 titre_competence" ng-hide="editorEnabled">{{$index + 1}} - {{competence.Competence.description}} </h3> 
    </div> 

    <p><b>Indicateurs de performances : </b></p> 

    <!-- Level 2 --> 
    <div data-ng-repeat="indicateur in competence.Indicateur" class="content level2" id="indicateur_{{indicateur.id}}"> 

     <div class="level2_title_box"> 
      <h4>{{$index + 1}} - {{indicateur.description}}</h4> 
     </div> 

     <p><b>Results : </b></p> 

     <p><a ng-click="listAllRestulatsByIndicateurId(indicateur)" href="javascript:void(0);">Click here to show results</a></p> 

     <!-- Level 3 --> 
     Level 3 shoudl be displayed there... 
     <!-- End Level 3 --> 

     <pre ng-if="indicateur.resultatsAttendusCallback">{{indicateur.resultatsAttendusCallback}} {{indicateur.resultatsAttendusCallback.length}}</pre> 

    </div> 
    <!-- End Level 2 --> 
</div> 
<!-- End Level 1--> 

JS：

$scope.listAllRestulatsByIndicateurId = function(indicateur) { 

     console.log(indicateur.id); 

     var req_resultats_by_indicateur = { 
      method: 'POST', 
      url: '../api/resultatAttendus/listByIndicateur', 
      headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 
      data: { 
       indicateur_id: indicateur.id 
      } 
     } 

     console.log(req_resultats_by_indicateur); 

     $http(req_resultats_by_indicateur).then(function successCallback(callback) { 

      if(callback.data.status == 'success') { 

       indicateur.resultatsAttendusCallback = callback.data.data; 
       console.log(callback); 
      } 

      if(callback.data.status == 'error') { 
       console.log(callback) 
      } 

     }); 
} 

Answer 2

我不是100％關注你的問題，但我想我知道你在幹什麼。您的callback.data.data將作爲JSON字符串返回，但您只需要它的一個子集。

這是我做的

$scope.resultatsAttendusCallback = MyModel.build(callback.data.data); 
    ........... 

    angular.module('lodgicalWebApp') 
    .factory('MyModel',['Column',function(Column){ 
     function MyModel(title, columns){ 
      this.title = title; 
      this.columns = Column.build(columns); //Column is another Model 
     } 


     MyModel.build = function(data){ 
      // //console.log("building variables: " + data); 
      var models= []; 
      angular.forEach(data, function(v,k){ 
       models.push(new MyModel(v.name, v.cols)); 
      }) 
      return models; 
     } 

     return MyModel; 
}) 

這讓我回到複雜的JSON並將其映射到在我的代碼真正的對象。您不必在構建中執行forEach，當我的JSON返回MyModels列表而不是單個列表時，我會執行此操作。從那裏你可以添加自己的ID，屬性，做任何數據轉換等。