Angular JS从select选项中删除空白选项
我是Angular JS的新手。 我search了很多，但它不能解决我的问题。
我在select框中第一次获得空白选项。
这是我的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演示
供参考： 为什么angularjs在select中包含一个空的选项 ？
当传递给
ng-options一组选项中不存在由ng-model引用的值时，会生成空option。 这样做可以防止意外的模型select：AngularJS可以看到初始模型在选项集中是未定义的或者不是，并且不想自己决定模型的值。简而言之：空选项意味着没有select有效的模型（有效的我的意思是：从选项集合中select）。 您需要select一个有效的模型值来摆脱这个空的选项。
像这样改变你的代码
var MyApp=angular.module('MyApp1',[]) MyApp.controller('MyController', function($scope) { $scope.feed = {}; //Configuration $scope.feed.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.feed.configs[0].value; });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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> --> <select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs"> </select> </div> </div>
尽pipe上述所有build议都可行，但有时我需要在初次进入我的屏幕时有一个空的select（显示占位符文本）。 所以，为了防止select框在我的列表的开始处（或者有时在结尾处）添加这个空的select，我正在使用这个技巧：
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>
现在你已经定义了这个空的选项，所以select框是开心的，但你保持隐藏。
这是一个更新的小提琴： http : //jsfiddle.net/UKySp/
您需要将您的初始模型值设置为实际的对象：
$scope.feed.config = $scope.configs[0];
并更新您的select看起来像这样：
<select ng-model="feed.config" ng-options="item.name for item in configs">
另一种解决方法是在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
干杯
有多种方式 –
<select ng-init="feed.config = options[0]" ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs"> </select>
要么
$scope.feed.config = $scope.configs[0].name;
这是一种解决方法，但像一个魅力。 只需添加<option value="" style="display: none"></option>作为填充符。 像：
<select size="4" ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs"> <option value="" style="display: none"></option> </select>
如果你只是想删除空格使用ng-show，你就完成了！ 不需要在JS中初始化值。
<select ng-model="SelectedStatus" ng-options="x.caption for x in statusList"> <option value="" ng-show="false"></option> </select>
像这样改变你的代码。 你忘记了内部选项的价值。 在分配ng模型之前。 它必须有一个价值。 只有这样它才不会得到未定义的值。
<div ng-app="MyApp1"> <div ng-controller="MyController"> <input type="text" ng-model="feed.name" placeholder="Name" /> <select ng-model="feed"> <option ng-repeat="template in configs" value="template.value">{{template.name}} </option> </select> </div> </div>
JS
var MyApp=angular.module('MyApp1',[]) MyApp.controller('MyController', function($scope) { $scope.feed = 'config1'; $scope.configs = [ {'name': 'Config 1', 'value': 'config1'}, {'name': 'Config 2', 'value': 'config2'}, {'name': 'Config 3', 'value': 'config3'} ]; });
还要检查你是否有任何虚假的价值。 Angularjs会插入一个空的选项，如果你有虚假的价值。 由于虚假价值，我挣扎了两天。 我希望这会对某人有所帮助。
我有选项[0，1]，最初我被设置为0，因为它被插入空选项。 解决方法是[“0”，“1”]。
