Question

我目前正在学习使用Angular.js进行编码，我正在做一个用Ajax查询加载信息的项目。

为了简短起见，我有三个级别的数据

- 技能（能力）

---指标（表明者）

----结果（结果）

我有第一个跟踪当前技能的技能和指标的请求。

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（shownur.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返回MyModel列表而不是单个MyModel时，我会这样做。从那里你可以添加自己的ID，属性，进行任何数据转换等。

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

2 个答案: