Ein weiterer API-Aufruf in ng-repeat durch Übergabe des ersten API-Werts

Question

Ich habe eine eckige Anwendung, die ich Webdienste aufrufen muss. Ich muss zwei verschiedene URLs anrufen, um Daten zu erhalten. In meiner ersten URL ist wie ==> abc.com/student/3 Dies ist die Liste der Schüler. und eine andere URL ist abc.com/parent/idofStudent3 Wenn ich die Studenten-ID von 3 in der zweiten URL übergebe, muss ich den Eltern-Vornamen von der zweiten URL erhalten.

Ich kann die ersten URL-Daten abrufen, aber ich kann keine zweiten URL-Daten abrufen, indem ich die ersten Datensatzdaten in ng-repeat übergebe. Könnten Sie mir bitte helfen, den Elternnamen auf der Webseite zu finden?

HTML-Seite

<h1 ng-repeat="x in myWelcome"> 
{{x.firstname}} || {{x.parentId}} </h1> 

hier statt parentid der Anzeige Ich brauche einen anderen Web-Service rufen Eltern Namen, indem parentId als Parameter anzuzeigen. Wie rufe ich hier einen anderen Webservice auf?

<script> 
    var app = angular.module('myApp', []); 
    app.controller('myCtrl', function($scope, $http) { 
     $http.get("abc.com/student/3") 
      .then(function(response) { 
       $scope.myWelcome = response.data; 
      }); 
    }); 
</script> 

==> Erste WebService Antwort ist wie:

{ 
    "student":[ 
    { 
     "name":"john", 
     "parentId": 12, 
     "address":"NYC" 
    }, 
    { 
     "name":"Rohi", 
     "parentId": 14, 
     "address":"NJ" 
    }, 
] 
} 

==> zweite WebService Antwort wie das ist, wenn parentId = 12:

{ 
    "firstName": "Sr. John", 
} 
======> when parentId 14 

{ 
    "firstName": "Sr. Rohi", 
} 


------------------------- 
firstname || parentName 
------------------------- 
John  || Sr. John 
Rohi  || Sr. Rohi 

Answer 1

Könnten Sie versuchen, indem Sie tun Änderungen.

<h1 ng-repeat="x in myWelcome"> 
{{x.firstname}} || {{ getparentname(x.parentId) }} </h1> 

und schreiben Sie die Funktion in Ihren Controller. wie unten

$scope.getparentname = function(data){ 
    //write you api here 
} 

Answer 2

ich die Verwendung von Reglerfunktion innerhalb Winkel ng-repeat stark entmutigen, weil es mehrmals während des Digest-Zyklus genannt wird. Der beste Weg für Sie wäre in diesem Fall die Verwendung der Winkelanweisungen. Sie können Ihre HTML als

<h1 ng-repeat="x in myWelcome"> 
{{x.firstname}} || 
<get-parent-name child='x' parent-name='parentName[$index]'>{{parentName[$index]}}</get-parent-name> 
</h1> 

In Ihrem Controller erklären die Parent als $scope.parentName = {}

Und in der JS-Datei fügen Sie eine neue Richtlinie wie diese

module.directive('getParentName', function ($http) { 
    return { 
     restrict: 'A', 
     scope : { 
      child : '=', 
      parentName : '=' 
     }, 
     link: function (scope, element, attr) { 
      var childId = scope.child.id; 
      $http.get("abc.com/parent/" + childId) 
       .then(function(response) { 
        scope.parentName = response.data.parentName; 
       }); 
     } 
    } 
}); 

setzen