我正在开发 AngularJS 1.0 应用程序,并面临 Angular Select 的问题。
只需复制虚拟代码:
<select ng-model ="data.state" ng-options="data.states">
选择
在这里,它列出了一个国家/地区的州,并将默认数据作为 ng-model 传递。
如果默认值与数据源不匹配,我需要显示文本“选择”。
但它没有按预期工作,并且显示了额外的空白空间而不是选择。
谢谢
最佳答案
“如果默认值与数据源不匹配,我需要显示文本“选择”。”在这种情况下,您的 data.state
可能为空(即“”)情况。您可能期待这样的逻辑:
<label>States : </label>
<select ng-model ="data.state" ng-options="data for data in data.states" >
<option value="" selected hidden >SELECT</option>
<!--Removes the Empty space and shows "SELECT" as pre-populated by default in the drop-down. -->
</select>
<br>Selected State : {{data.state}}
空白区域显示为 Angular 提供的占位符,用于保存类似 "Select an option"
的文本。或"Choose a best answer"
。您可以使用 <option value="" selected hidden >Select</option>
覆盖它它不会出现在选定的下拉选项列表中,因为它是 hidden
.
如果您希望选择显示为一个选项,供用户按顺序选择(如果该字段可以保留为空并且不是强制性的),您可以使用以下代码:
<option value="" selected >SELECT</option>
在 Controller 中期望数据为:
// $scope.data.state = something that is returned from some API response
$scope.data = {
states: [
"Kerala",
"Karnataka",
"Andhra",
"Haryana"
]
}
查看 JS Fiddle here用于工作样本。
关于javascript - 如何防止Angular1.0选择(下拉)多余的空格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50733387/