Javascript ng中的另一个API调用通过传递第一个API值来重复

我有一个角度应用程序，我需要调用web服务。我必须调用两个不同的URL来获取数据。在我的第一个URL中 ==>abc.com/student/3这是学生名单。另一个URL是abc.com/parent/idofStudent3当我在第二个URL中通过学生id 3时，我需要从第二个URL中获取家长的名字

我能够检索第一个URL数据，但我无法通过在ng repeat中传递第一个记录数据来检索第二个URL数据。你能帮助我如何在网页中检索父姓名吗

Html页面

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

==>当parentId=12时，第二个webservice响应如下：

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

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


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

---

你能试着做下面的改变吗

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

---

你能试着做下面的改变吗

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

---

我强烈反对在angular

ng repeat

中使用控制器函数，因为它在摘要循环中被调用多次。在这种情况下，最好的方法是使用角度指令。您可以将HTML作为

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

---

我强烈反对在angular

ng repeat

中使用控制器函数，因为它在摘要循环中被调用多次。在这种情况下，最好的方法是使用角度指令。您可以将HTML作为

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

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

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