如果值动态来自休息调用，如何在 <select> 中默认显示选项答案

【问题标题】：How to display an option by default in <select> if the values are coming dynamically from rest call如果值动态来自休息调用，如何在 <select> 中默认显示选项
【发布时间】：2016-11-24 19:45:03
【问题描述】：

我有一个字段，它的值来自服务，我使用 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();  

     }}

                      }

我正在尝试默认显示第一个选项..任何想法

【问题讨论】：

标签： javascript html angularjs select meteor

【解决方案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]">

【讨论】：

【解决方案2】：

您可以在模型中保存默认选项值，例如：

<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";

【讨论】：

是的..但是我们只需要显示来自服务的值，否则另一个调用填充失败
它在范围变量中为我正常工作。具有相同的标准。
我们不确定要选择什么值..所以我无法设置它..我试图实现这一点，因为验证不适用于
所以使用不知道想要绑定在下拉列表中的值。
我没有收到您的上述评论

【解决方案3】：

最简单的一个：

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

【讨论】：

它不能是文本......我正在努力实现这一点，因为验证不适用于

【解决方案4】：

使用 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">

【讨论】：

试过..但没有运气
它没有设置初始值？