Question

使用ng-model和ng-options属性我绑定select html标签。它正确地绑定了选项中的所有数据但是一个空选项首先绑定到＆＃34; ＆＃34 ;. 我想使用angular

删除这个空选项

＆＃13;

<select class="ng-pristine UserGroups selectGroupClass"  ng-model='groupList' required ng-options='item.name for item in groupOptions track by item.name'></select>

＆＃13;

$scope.groupOptions = [{ name: "What's Hot", value: 'latest' }, { name: 'Trending', value: 'popular' }];

Answer 1

当传递给ng-options的一组选项中不存在ng-model引用的值时，会生成空选项。

如果要使用角度选择控制器中的初始值来删除此空选项，

$scope.groupList = $scope.groupOptions[0];

请查看工作示例：Here

OR

您可以添加

<option style="display:none" value="">select a type</option>

在HTML中

<select class="ng-pristine UserGroups selectGroupClass"  ng-model='groupList' required ng-options='item.name for item in groupOptions track by item.name'>
  <option ng-hide="true" value="">Select a Type</option>
</select>

请在此处查看工作示例：Demo for 2nd option

Answer 2

track by帮助Angular在内部进行数组排序并防止数组中的重复项。选项的值由第一个参数定义（在您的案例项中）。如果你希望它是id，那么你应该在itemOptions

中使用item as item.name作为item

Answer 3

其中一个项目有一个空白名称是我能想到的！如果可能，请验证..如果可能的话，使用item.someOtherproperty来调试：）

Answer 4

试试这个解决方案

   <select ng-model="selected" ng-options="item as item.name for item in groupOptions">
    <option value="">Choose</option>}
   </select>
<div data-ng-bind="selected.name"></div>

Angular JS select tag ng模型给出一个空选项Issue

4 个答案: