为什么AngularJS在select中包含一个空选项?

过去几周我一直在使用AngularJS，有一件事真的困扰着我，即使在http://docs.angularjs.org/api/ng.directive:select的规范中尝试了所有的排列或配置，我仍然得到一个空选项作为select元素的第一子元素。

这是玉:

select.span9(ng-model='form.type', required, ng-options='option.value as option.name for option in typeOptions');

下面是控制器:

$scope.typeOptions = [
    { name: 'Feature', value: 'feature' },
    { name: 'Bug', value: 'bug' },
    { name: 'Enhancement', value: 'enhancement' }
];

最后，这里是生成的HTML:

<select ng-model="form.type" required="required" ng-options="option.value as option.name for option in typeOptions" class="span9 ng-pristine ng-invalid ng-invalid-required">
    <option value="?" selected="selected"></option>
    <option value="0">Feature</option>
    <option value="1">Bug</option>
    <option value="2">Enhancement</option>
</select>

我需要做什么才能摆脱它?

附注:没有这个也可以工作，但是如果使用select2而没有多重选择，它看起来很奇怪。

当前回答

下面是解决方案:

对于如下示例数据:

financeRef.pageCount = [{listCount:10,listName:modelStrings.COMMON_TEN_PAGE},    
{listCount:25,listName:modelStrings.COMMON_TWENTYFIVE_PAGE},
{listCount:50,listName:modelStrings.COMMON_FIFTY_PAGE}];

选择选项应该像这样:-

<select ng-model="financeRef.financeLimit" ng-change="financeRef.updateRecords(1)" 
class="perPageCount" ng-show="financeRef.showTable" ng-init="financeRef.financeLimit=10"
ng-options="value.listCount as value.listName for  value in financeRef.pageCount"
></select>

重点是当我们写值的时候。listCount作为值。listName，它自动在value中填充文本。listName，但所选选项的值为value。虽然我的值显示正常的0,1,2 ..等等!!

在我的例子中，是financeRef。financeLimit实际上是在获取值。listCount，我可以动态地在控制器中进行操作。

2014-09-03 18:31:43

其他回答

参考angularjs文档中的例子如何克服这些问题。

点击这里的文档链接查找“通过ngModel解析/格式化将select绑定到非字符串值” 你可以看到，指令convertToNumber解决了这个问题。

这对我很管用。也可以看到它是如何工作在这里

2019-03-22 07:41:36

这对我很有效

<select ng-init="basicProfile.casteId" ng-model="basicProfile.casteId" class="form-control">
     <option value="0">Select Caste....</option>
     <option data-ng-repeat="option in formCastes" value="{{option.id}}">{{option.casteName}}</option>
 </select>

2015-12-15 15:56:49

在这里的众多答案中，我认为我应该转发对我有效的解决方案，并满足以下所有条件:

当ng-model是假的时提供一个占位符/提示符。——select region——" w. value="") 当ng-model值为假值时，用户打开options下拉菜单，则选择占位符(此处提到的其他解决方案使第一个选项显示为选中，这可能会产生误导) 允许用户取消选择有效值，实际上是再次选择假值/默认值

code

<select name="market_vertical" ng-model="vc.viewData.market_vertical"
    ng-options="opt as (opt | capitalizeFirst) for opt in vc.adminData.regions">

    <option ng-selected="true" value="">select a market vertical</option>
</select>

src

独创的q&a - https://stackoverflow.com/a/32880941/1121919

2016-04-27 14:53:49

当你无法控制选项时，使用jQuery的刷任务解决方案

html:

<select id="selector" ng-select="selector" data-ng-init=init() >
...
</select>

js:

$scope.init = function () {
    jQuery('#selector option:first').remove();
    $scope.selector=jQuery('#selector option:first').val();
}

2017-04-05 13:23:50

也许对某人有用:

如果你想使用普通选项而不是ng-options，你可以这样做:

<select ng-model="sortorder" ng-init="sortorder='publish_date'">
  <option value="publish_date">Ascending</option>
  <option value="-publish_date">Descending</option>
</select>

内联设置模型。使用ng-init清除空选项

2013-08-28 13:32:54

为什么AngularJS在select中包含一个空选项?

推荐文章

最新文章

标签