angularjs的select第一个选项为空的处理

Bertha 。 2022-02-03 10:57 311阅读 0赞

1、做angularjs的select赋值时，出现第一个选项为空的情况，如下所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6ajgwOTI3_size_16_color_FFFFFF_t_70][]

查看源码，如下显示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6ajgwOTI3_size_16_color_FFFFFF_t_70 1][]

2、解决方式

2.1第一个想到的就是把第一项设置为：请选择，方法如下：

<tr>
        <td>基础题型</td>
        <td><select class="form-control" ng-model="entity.type" >
         <option value="">请选择</option>
         <option ng-repeat="entityType in baseTypeList" value="{
       {entityType.typeId}}">{
       {entityType.typeName}}</option>
          </select>
         </td>
      </tr>

结果如下：

![20190509120709501.png][]

2.2 我实际想第一个选项为返回集合的第一项，方法如下：

//获取基础题型
        $scope.findAllBaseType = function(){
            shuobaExamTypeService.findAllBaseType().success(
                function (result) {
                    $scope.baseTypeList=result;
                    $scope.entity.type=$scope.baseTypeList[0].typeId;
                    
                }
            );
        }

最开始我赋值为：

$scope.entity.type=$scope.baseTypeList[0].typeName;

结果是不行的，必须赋值为typeId，也就是赋值给value，和下面的保持一致

<option ng-repeat="entityType in baseTypeList" value="{
       {entityType.typeId}}">{
       {entityType.typeName}}</option>

结果如下：

![2019050912103995.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6ajgwOTI3_size_16_color_FFFFFF_t_70]: /images/20220203/526defb9f72f4441b7053478cee8dec4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6ajgwOTI3_size_16_color_FFFFFF_t_70 1]: /images/20220203/05abd726a7e14cc8a93dfde5c547ac14.png
[20190509120709501.png]: /images/20220203/f7ffcdfff8724cf6837b80fa26725127.png
[2019050912103995.png]: /images/20220203/5db59c4e429a453d9925d268db21ebec.png