使用AngularJS从选择选项中删除空白选项
使用AngularJS从选择选项中删除空白选项
提问于 2013-12-23 15:33:05
我是AngularJS的新手。我找了很多，但没有解决我的问题。
我第一次在选择框中看到空白选项。
这是我的HTML代码
<div ng-app="MyApp1">
<div ng-controller="MyController">
<input type="text" ng-model="feed.name" placeholder="Name" />
<select ng-model="feed.config">
<option ng-repeat="template in configs">{{template.name}}</option>
</select>
</div>
</div>JS
var MyApp=angular.module('MyApp1',[])
MyApp.controller('MyController', function($scope) {
$scope.feed = {};
//Configuration
$scope.configs = [
{'name': 'Config 1',
'value': 'config1'},
{'name': 'Config 2',
'value': 'config2'},
{'name': 'Config 3',
'value': 'config3'}
];
//Setting first option as selected in configuration select
$scope.feed.config = $scope.configs[0].value;
});但它似乎不起作用。我怎样才能解决这个问题？这是JSFiddle Demo
回答 11
Stack Overflow用户
发布于 2015-06-21 05:32:47
虽然上面的所有建议都有效，但有时我需要在最初进入我的屏幕时选择一个空选项(显示占位符文本)。因此，为了防止选择框在我的列表的开头(有时是末尾)添加这个空选择，我使用了这个技巧：
HTML代码
<div ng-app="MyApp1">
<div ng-controller="MyController">
<input type="text" ng-model="feed.name" placeholder="Name" />
<select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs" placeholder="Config">
<option value="" selected hidden />
</select>
</div>
</div>现在你已经定义了这个空的选项，所以选择框是满意的，但是你将它隐藏起来。
Stack Overflow用户
发布于 2013-12-23 15:41:39
这是一个更新的提琴：http://jsfiddle.net/UKySp/
您需要将初始模型值设置为实际对象：
$scope.feed.config = $scope.configs[0];并将您的选择更新为如下所示：
<select ng-model="feed.config" ng-options="item.name for item in configs">Stack Overflow用户
发布于 2015-11-09 15:25:39
另一种解决方法是在ng-repeat中使用：$first
用法：
<select ng-model="feed.config">
<option ng-repeat="template in configs" ng-selected="$first">{{template.name}}</option>
</select>参考
ngSelected：https://docs.angularjs.org/api/ng/directive/ngSelected
$first：https://docs.angularjs.org/api/ng/directive/ngRepeat
干杯
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20738953
复制相关文章
相似问题