最初のAPI値を渡してng-repeat内の別のAPI呼び出し

Question

私はWebサービスを呼び出す必要のある角型アプリケーションを持っています。私は2つの異なるURLを呼び出してデータを取得する必要があります。私の最初のURLには、 ==> abc.com/student/3があります。これは学生のリストです。別のURLはです。abc.com/parent/idofStudent3 2番目のURLにstudent id 3を渡すと、2番目のURLから親のファーストネームを取得する必要があります。

最初のURLデータは取得できますが、最初のレコードデータをng-repeatで渡すことで2番目のURLデータを取得できません。ウェブページの親の名前を取得する方法を教えてください。

のHTMLページ

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

ここ

の代わりに、私は、パラメータとしてPARENTIDを渡すことで、親の名前を表示するには、別のWebサービスを呼び出すために必要なのParentIDを表示します。ここで別のWebサービスを呼び出す方法は？

<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> 

==>まず、Webサービスの応答は次のようである：

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

==>第二Webサービスの応答は次のようであるときPARENTID = 12：

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

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


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

Answer 1

あなたは、以下の実行してみてくださいでした変更。

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

コントローラに書き込み機能があります。それはダイジェストサイクル中に複数回呼び出されるため

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

Answer 2

以下のように私は強く、角度ng-repeat内のコントローラ機能の使用を思いとどまら。この場合の最適な方法は、角度指令の使用です。お使いのコントローラで

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

が$scope.parentName = {}

としてparentNameを宣言するとJSファイル内に新しいディレクティブ

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

このように追加して、あなたのHTMLを置くことができます