Ajax 请求回调到 ng-repeat 元素 Angular.js

Question

我目前正在学习使用 Angular.js 编码，并且我正在做一个项目，我在其中使用 Ajax 查询加载信息。

简而言之，我有三个级别的数据

-- Skills（能力）

--- Indicators（指标）

---- 结果（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>

当我点击 listAllRestulatsByIndicateurId(indicateur.id);函数，有一个 Ajax 请求获取给定指标的所有结果。

我还没有弄清楚的一点是我应该如何知道在哪里输出这个，因为我可以有很多指标。

我的Angular函数

$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 或 Class 名称赋予这些元素，这样我就可以知道哪个元素可以工作并让 angular 回调工作？

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;
})

这允许我 return 复杂 JSON 并将其映射到我的代码中的真实对象。您也不必在构建中执行 forEach，当我的 JSON return 是 MyModels 列表而不是单个模型时，我会执行此操作。从那里您可以添加自己的 ID、属性、进行任何数据转换等。

Ajax 请求回调到 ng-repeat 元素 Angular.js

Ajax request with callback into ng-repeat element Angular.js

ajax

angularjs

ng-repeat