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

Question

我试图根据下拉列表选择自动显示协调器名称。 所有数据均来自API。 因此，下拉列表中的列表是来自以下json数据的emailAddress ，并且在选择特定登录ID的基础上，其各自的firstname应自动显示在协调器名称部分中。

例如：我从下拉列表中选择vp2@vp2.com ，名字vp2应该自动显示在协调器名称部分中。以下是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分配给personDetails的firstName。

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

    personDetail.firstName = coord.firstName;
}

不知道为什么要遍历结果集。 为什么不只将用户分配给hodAdminCoordinators。 也许我在想什么...