如何安装ID到NG-模型动态

Question

<select class="form-control" select-multiple-picker multiple data-max-options="2" ng-model="userDetails.ClinicalRoles" name="createUserSelectClinicalRoles" id="createUserSelectClinicalRoles"> 
    <option ng-repeat="role in clinicalRole" value="{{role.Description}}">{{role.Description}}</option> 
</select> 

在这里，我从服务器获取数据列出，我只显示{{role.Description}}用户，但是当我提出我需要附上role.id和role.Description到ng-Model调用API。

Answer 1

您可以NG选项做到这一点，如选择：https://docs.angularjs.org/api/ng/directive/ngOptions

Answer 2

不要使用NG-重复了点。改用ng-options。

尝试这个 -

<select class="form-control" select-multiple-picker multiple data-max-options="2" ng-model="userDetails.ClinicalRoles" name="createUserSelectClinicalRoles" id="createUserSelectClinicalRoles" 
ng-options="role.id as role.Description for role in clinicalRole">     
</select> 

如果你想一次选择两个。然后你可以使用一个技巧。在select中添加ng-change属性，并将它所选的role.id作为模型传递给函数。

HTML

<select class="form-control" select-multiple-picker multiple data-max-options="2" ng-model="userDetails.ClinicalRoles" name="createUserSelectClinicalRoles" id="createUserSelectClinicalRoles" 
ng-options="role.id as role.Description for role in clinicalRole" 
ng-change="setDescription(role)">     
</select> 

JS

$scope.lastSelectedDesc = {}; 
$scope.setDescription(role){ 
    $scope.lastSelectedDesc = role; 
} 

只要做到这一点。

Answer 3

您可以将整个对象保存在ng模型中而不是单个属性中。

HTML： -

<div data-ng-app="myApp" data-ng-controller="Ctrl" style="margin-top:40px"> 
     <div> 
      <select class="form-control" id="Region" data-ng-model="selectedValue" data-ng-options="value.Desc for value in values track by value.id"> 
       <option value=''>Select</option> 
      </select> 
     </div> 
     <div> 
      Selected Option Label : {{selectedValue.label}}<hr/> 
      Selected Option Id : {{selectedValue.id}}<hr/> 
      Selected Option Desc : {{selectedValue.Desc}}<hr /> 
     </div> 
    </div> 

的Javascript： -

 <script type="text/javascript"> 

      var IsApp = angular.module('myApp', []); 

      IsApp.controller('Ctrl', function ($scope, $http) { 
       $scope.values = [{ 
        id: 1, 
        label: 'aLabel', 
        Desc: 'Desc-aLabel' 
       }, { 
        id: 2, 
        label: 'bLabel', 
        Desc: 'Desc-bLabel' 
       }]; 
      });// End of controller 
     </script> 

在提交你可以通过selectedValue.id和selectedValue.Desc。