空白 select 选项 #ngValue

Question

如何避免在表单输出中出现空白选项？

 <select class="form-control" ng-model="item.type" >
                                <option ng-value="0">Real</option>
                                <option ng-value="1">Fake</option>
                                <option ng-value="2">Both</option>
                            </select>

item.type在控制器中设置

这个问题与我在类似主题中看到的问题略有不同，因为使用了 ng-value 并且 item.type 的值已经设置

编辑：将 ng-value 更改为 value 解决了问题。

Answer 1

控制器中item.type是如何设置的？

空行是item.type的当前值。如果你把它设置为控制器中的一个对象，这样显示是正常的。尝试将其设置为您拥有的 3 个选项之一：

   angular.module('yourModule').controller('ctrl', function($scope)){
       $scope.item = {}; //edited
       $scope.item.type = "1"; // or 2, or 0
   }

这就是 angular 处理双向数据绑定的方式。如果您的 item.type 的值与任何选项都不匹配，则正常添加另一个空行。

编辑：

<select class="form-control" ng-model="item.type" >
    <option value="0">Real</option>
    <option value="1">Fake</option>
    <option value="2">Both</option>
</select>

Answer 2

空白选项的问题是由于ng-model 与ng-option 值不匹配造成的。您可以使用 {{item.type}} 在视图中打印 item.type 的值吗？

进行以下更改。

在控制器中将 item.type 设置为

$scope.item = {}; $scope.item.type = "1";

在 html 中进行以下更改。

<select class="form-control" ng-model="item.type" >
                            <option value="0">Real</option>
                            <option value="1">Fake</option>
                            <option value="2">Both</option>
                        </select>

空白 select 选项 #ngValue

Blank select option #ngValue

javascript

angularjs

angularjs-ng-value