过去几周我一直在使用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而没有多重选择,它看起来很奇怪。
在这里的众多答案中,我认为我应该转发对我有效的解决方案,并满足以下所有条件:
当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
下面是解决方案:
对于如下示例数据:
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,我可以动态地在控制器中进行操作。
我也有同样的问题,
我(删除了“ng-model”)改变了这个:
<select ng-model="mapayear" id="mapayear" name="mapayear" style=" display:inline-block !important; max-width: 20%;" class="form-control">
<option id="removable" hidden> Selecione u </option>
<option selected ng-repeat="x in anos" value="{{ x.ano }}">{{ x.ano }}
</option>
</select>
:
<select id="mapayear" name="mapayear" style=" display:inline-block !important; max-width: 20%;" class="form-control">
<option id="removable" hidden> Selecione u </option>
<option selected ng-repeat="x in anos" value="{{ x.ano }}">{{ x.ano }}
</option>
</select>
现在它的工作,但在我的情况下,这是由于我删除范围从ng。控制器,检查你是否没有做同样的事情。