如何安裝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。