如何使用Angular.js从API的下拉列表中选择特定数据时显示相关数据？

Question

I am trying to display the coordinators name automatically based on the dropdown list selection. All the data comes from API. So the list in the dropdown is the emailAddress from the below json data and based on choosing a particular login id, its respective firstname should be automatically displayed in the coordinators name part.

For example: I choose vp2@vp2.com from dropdown, firstname vp2 should be automatically displayed in coordinators Name part.Below is the API json data and screenshot. I am able to get the details in the dropdown but I need suggestions on how to display the relative name automatically using 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 file

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

getting coordinators list in dropdown

   $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

You can use ng-change on the select instead of 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>

Inside your controller you can select the coordinator using a filter and assign the firstName to the firstName of the personDetail

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

    personDetail.firstName = coord.firstName;
}

Not sure why you are looping through your resultset. Why not just assign the users to hodAdminCoordinators. Maybe I'm missing something...