空白选择选项#ngValue

时间:2016-06-09 14:38:45

标签: javascript angularjs angularjs-ng-value

如何在表格输出中避免空白选项?

 <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解决了这个问题。

2 个答案:

答案 0 :(得分:1)

如何在控制器中设置item.type?

空行是item.type的当前值。如果将其设置为控制器中的对象,则以这种方式显示是正常的。尝试将其设置为您喜欢的3种选择之一:

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

这是角度处理双向数据绑定的方式。如果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>

答案 1 :(得分:0)

空白选项的问题是由于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>