Question

我正在尝试根据下拉列表选择自动显示协调员名称。所有数据都来自API。因此，下拉列表中的列表是来自以下json数据的emailAddress，并且基于选择特定的登录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

您可以在select而不是ng-click上使用ng-change。

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

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

    personDetail.firstName = coord.firstName;
}

不确定为什么要循环遍历结果集。为什么不将用户分配给hodAdminCoordinators。也许我错过了什么......

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

1 个答案: