如何在默認情況下顯示選項 <select>如果值是從rest調用動態得出的

Question

我有一個字段，其中的值來自服務，我正在使用ng-options顯示在選擇字段中。但是默認情況下，我想顯示第一個選項。

HTML

<div class="col-lg-4">
<select class="form-control" id="select" ng-model="$root.customerDetails.traderType" 
ng-options="traderTypeObj.description for traderTypeObj in traderTypes track by 
traderTypeObj.type">
</select>
</div>

js：

 if(results.data.traderTypes.status.code == 200){
 for(let i= 0; i< results.data.traderTypes.body.length ; i++ ){
 let keyVal = {};
 keyVal.type = results.data.traderTypes.body[i].ITTD_TRADER_TYPE_CODE;
 keyVal.description = results.data.traderTypes.body[i].ITTD_TRADER_TYPE_DESCRIPTION;
 $scope.traderTypes.push(keyVal); 
  }
  }
  if($rootScope.customerDetails != null &&$rootScope.customerDetails.natureOfBusiness != null && $rootScope.customerDetails.traderType !=
 null){
 for(let i=0; i < $scope.businessTypes.length ; i++ ){
 if($scope.businessTypes[i].description == $rootScope.customerDetails.natureOfBusiness.description){                                 $rootScope.customerDetails.natureOfBusiness.type =
 $scope.businessTypes[i].type;

}
}
for(let i=0; i < $scope.traderTypes.length ; i++ ){

 if($scope.traderTypes[i].description == $rootScope.customerDetails.traderType.description){$rootScope.customerDetails.traderType.type = $scope.traderTypes[i].type;
                                  }   $rootScope.customerDetails.traderType=$scope.traderTypes[0].description;
                                } 

$scope.$apply();  

     }}

                      }

我試圖從默認情況下顯示第一個選項..任何想法

Answer 1

您可以使用，它會在初始化時將您的第一個選項設置為默認值，

ng-init="$root.customerDetails.traderType = options[0]"

// In HTML

<select class="form-control" id="select" ng-
model="$root.customerDetails.traderType" 
ng-options="traderTypeObj.description for traderTypeObj in traderTypes track
by traderTypeObj.type" ng-init="$root.customerDetails.traderType =
options[0]">

Answer 2

使用ng-init

   <select class="form-control" id="select" ng-init="$root.customerDetails.traderType = traderTypes[0]"  ng-model="$root.customerDetails.traderType" 
    ng-options="traderTypeObj.description for traderTypeObj in traderTypes track by 
    traderTypeObj.type">

Answer 3

您可以在模型中保存默認選項值，例如：

<select class="form-control" id="select" ng-model="$root.customerDetails.traderType" 
ng-options="traderTypeObj.description for traderTypeObj in traderTypes track by 
traderTypeObj.type">

並且在服務存儲中，值如下：如果您有id字段，則為0，否則值為“ abc”

$root.customerDetails.traderType = 0; 
or
$root.customerDetails.traderType = "abc";

Answer 4

最簡單的一個：

<select class="form-control" id="select" ng-model="$root.customerDetails.traderType" 
    ng-options="traderTypeObj.description for traderTypeObj in traderTypes track by 
    traderTypeObj.type">
        <option value="DefaultOption">Your default option</option>
</select>