如何使用Angular.js顯示從API下拉列表中選擇特定數據的相關數據？

Question

我想根據下拉列表選擇自動顯示協調員名稱。所有數據都來自API。因此，下拉列表中的emailAddress來自下面的json數據，並且基於選擇特定的登錄ID，其各自的firstname應該自動顯示在協調器名稱部分中。

例如：我選擇vp2@vp2.com從下拉列表中，姓名VP2應自動顯示在協調名稱part.Below是API JSON數據和截圖。我能夠獲得在下拉菜單中的細節，但我需要如何顯示自動使用Angular.js 1

{ 
    "users": [ 
{ 
    "_id": "583ff900836f861d7b94dac3", 
    "emailAddress": "VP2@VP2.com", 
    "lastName": "VP2", 
    "firstName": "VP2" 
}, 
{ 
    "_id": "58429971836f860e87083f2c", 
    "emailAddress": "VP3@VP3.com", 
    "lastName": "VP3", 
    "firstName": "VP3" 
} 
      ] 
    } 

相對名稱上建議index.html文件

<table class="table table-striped table-bordered"> 
          <thead> 
           <tr> 
            <th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th> 
            <th>Coordinators Type</th> 
            <th>Coordinators Type ShortName</th> 
            <th>Coordinators LoginID</th> 
            <th>Coordinators Name</th> 
            <th>Coordinators image</th> 
           </tr> 
          </thead> 
          <tbody> 
           <tr ng-repeat="personalDetail in personalDetails"> 
            <td><input type="checkbox" ng-model="personalDetail.selected"/></td> 
            <td><input type="text" class="form-control" ng-model="personalDetail.coordinatorType" required/></td> 
            <td><input type="text" class="form-control" ng-model="personalDetail.coordinatorTypeShortName" required/></td> 
            <td><select ng-model="personalDetail.coordinatorId" ng-options="collegeCoordsList._id as collegeCoordsList.emailAddress+' - '+collegeCoordsList.fullName for collegeCoordsList in hodAdminCoordinators" ng-click="getCoordinatorName(personalDetail.coordinatorId)"></select></td> 
            <!-- <td><input type="email" class="form-control" ng-model="personalDetail.coLoginid" required/></td> --> 
            <td><input type="text" class="form-control" ng-model="personalDetail.coordinatorName" required/></td> 
            <td><img src="{{hodList.imageUrl}}" style="width:50px;height:50px;"></td> 
           </tr> 
          </tbody> 
         </table> 

獲取協調員名單中的下拉列表

$http.get('https://student.herokuapp.com/college/coordinators/timeCoordinator') 

     .success(function(response){ 

      coordinatorLength=response.users.length; 

      for(var i=0;i<coordinatorLength;i++) 
      { 

       $scope.hodAdminCoordinators.push({ "_id":response.users[i]._id, 
                "emailAddress":response.users[i].emailAddress, 
                "lastName":response.users[i].lastName, 
                "firstName": response.users[i].firstName }); 
      } 
     }); 

Answer 1

您可以使用ng-change替代ng-click。

<select ng-model="personalDetail.coordinatorId" ng-options="collegeCoordsList._id as collegeCoordsList.emailAddress+' - '+collegeCoordsList.fullName for collegeCoordsList in hodAdminCoordinators" ng-change="setCoordinatorName(personalDetail)"></select> 

裏面你的控制器，你可以使用過濾器選擇協調員和的firstName分配到的personDetail

$scope.setCoordinatorName = function(personalDetail){ 
    var coord = $scope.hodAdminCoordinators 
     .filter(function(co){ 
     return co._id === personalDetail.coordinatorId 
     })[0]; 

    personDetail.firstName = coord.firstName; 
} 

不確定的firstName爲什麼要通過你的結果集循環。爲什麼不把用戶分配給hodAdminCoordinators。也許我失去了一些東西...