Question

我一直在搜索高低，以获取解释如何删除AngularJS总是在选择中呈现的空选项。当从直接放在代码中的JSON数组派生选项时，我发现了很多信息，但在处理数据对象时，我找不到任何关于删除这个空选项的信息。

说我有对象＆＃34; foo＆＃34;在我的数据库和＆＃34; foo＆＃34;有一个＆＃34;名称＆＃34;和＆＃34; bar_id＆＃34;。

有人可以告诉我有关使用数据对象执行此操作的线索吗？

参考文献： Angular JS Remove Blank option from Select Option

http://jsfiddle.net/MTfRD/3/（这是其他人在上面链接的SO问题中的小提琴;代码不是我的，而是从那个小提琴中获取。）

JS：

function MyCtrl($scope) {
    $scope.typeOptions = [

        { name: 'Feature', value: 'feature' }, 
        { name: 'Bug', value: 'bug' }, 
        { name: 'Enhancement', value: 'enhancement' }
    ];

    $scope.form = {type : $scope.typeOptions[0].value};
}

我想获得foo.name和foo.bar_id。我希望foo.name为选项标签，foo.bar_id为值（例如<option value="foo.bar_id">foo.name</option>。对于每个foo，foo.bar_id将成为记录中的标识参数，以便拉出并显示＆＃34 ;在变更时＃（选择选项后立即）。

我已经尝试了所有我能想到的东西来设置它，似乎没有任何效果。最糟糕的是，它要么默默地失败，要么没有任何迹象表明我做错了什么，或抱怨foo不是一个对象，这让我感到沮丧。（我向你保证，＆＃34; foo＆＃34;在我正在处理的实际代码中被一个AJAX请求加载并在其他地方作为一个对象正常工作--NDA禁止我分享实际的代码，遗憾。）

使用其他线程中的上述示例，我知道我会在模板中的select标记中分配ng-model="typeOptions"之类的内容，但是我如何获得＆＃34; typeOptions＆＃34;访问foo并使foo.name成为选项标签而foo.bar_id是选项值？此外，选项的默认角度值（看起来像生成的索引的那些）对我来说很好，但是我仍然需要调用foo.bar_id来完成任务，所以它必须是＆＃34;在那里某处＆＃34 ;.

任何帮助将不胜感激;目前我一直坚持使用选项本身的hackish ng-repeat，我理解这不是最佳实践。而且我在Angular中仍然相当新，但仍然觉得它有些混乱，所以更简单和你的答案越简单，我就能越好地成功使用它们。谢谢！

Answer 1

更新

好的，我刚才明白你真正的问题是什么（至少我希望如此;））。幸运的是，这很容易：

<强>控制：

$scope.options = {
  a: 1,
  b: 2,
  c: 3      
};

$scope.selected = 1;

查看：

<select data-ng-model="selected" data-ng-options="v as k for (k, v) in options" ></select>

演示：http://jsbin.com/hufehidotuca/1/

有关更多选项，请查看manual。特别是在：
对象数据源的
ngOptions（可选）»：

上一个回答：

正如我在评论中写的ngOptions：

您无法强制角度将模型数据用作视图中的实际选项值。 Angular以自己的方式处理它。它只能确保您的范围模型在更改时设置为正确的值。如果这不是您想要的，那么您必须编写自己的指令，可能使用ngRepeat。

你总是需要两个单独的模型。一个用作选项列表（这应该总是一个对象数组）和一个用于存储所选值（这将在设置ngOptions指令的方式上有所不同）。

提示：当角度无法与指定的ngModel匹配到和选项列表时，臭名昭着的空白选项始终是结果 real 空白选项已设置。（注意：如果ngModel在当前范围内只是undefined，或者它的值无法与选项列表匹配，那么它将被设置或者它的值将被覆盖，第一个选择任何选项。这就是之后空白选项消失的原因。）

<强>控制：

// the "list of options" $scope.options = [ { name: 'A', id: 1 }, { name: 'B', id: 2 }, { name: 'C', id: 3 }, { name: 'D', id: 4 } ]; // a pre-selection by value $scope.asValue = 2; // a pre-selection by object-identity $scope.asObject = $scope.options[3];

查看：

 <select data-ng-model="asValue" data-ng-options="foo.id as foo.name for foo in options" ></select>  <select data-ng-model="asObject" data-ng-options="foo as foo.name for foo in options" ></select>  <select data-ng-model="asBogus" data-ng-options="foo as foo.name for foo in options" ></select>  <select data-ng-model="asBogus" data-ng-options="foo as foo.name for foo in options" > <option value="">Please select</option> </select>

<强>演示：

http://jsbin.com/yasodacomadu/1/

Answer 2

只是发布作为整个数据对象问题的后续行动......

为了完成这项工作，我必须首先正确指定ng-options。我在其他地方已经提到过，我在学习AngularJS时反复出现的个人问题之一就是过度思考＆＃34;事情和不必要地混淆我自己，这也不例外。在与使用我的＆＃34; foo.bar＆＃34;伪指定，我需要设置HTML模板：

<select ng-model="selected_item" ng-options="bar.item_name for bar in foo.bars">

我希望将此选项设置为＆＃34; bar＆＃34;当前显示的显示（与第一个索引＆＃34; bar＆＃34;在＆＃34;＆＃34;＆＃34; foo＆＃34;的完整列表中相对），所以我不得不找到放置在传入此数据对象的app控制器中并为模型添加（我将其称为$ selected_item）：

$scope.selected_item = _.find($scope.foo.bars, function(bar) {
    return bar.item_id == $scope.current_result.foo_item_id;
});

这是一个非常复杂的数据结构，有很多存储过程和连接表，所以我不能轻易地将它转换为工作的伪对象/属性示例。 Yoshi你一直很乐于助人;沟通方面的差距一直是我的坏人。谢谢你坚持我。

对于可能偶然发现这个问题的其他混淆的AngularJS n00bs：我所在的地方＆＃34;过度思考＆＃34;它让我感到困惑的是 错误地相信 我需要某种代码代替JSON数组我学习的很多例子，通过在数据对象中。这是不正确的 - ＆＃34;没有＆＃34;在传递数据对象和/或其属性方面需要去那里。数据对象的属性使用select直接传递到ng-options标记内的模板中。因此，如果其他任何人发现自己被这一点困扰，你可能会犯同样的两个错误：（1）思考＆＃34;其他事情＆＃34;应该替换在线使用的JSON数组示例和（2）你的ng-options编写不正确。

Angular确实让我有时感到愚蠢!!这很有趣也很有挑战性，但有时它让我觉得自己像个白痴。： - ）

Answer 3

<select ng-model="form.type" required="required"
  ng-options="option.value as option.name for option in typeOptions" >
    <option style="display:none" value="">select a type</option>
</select>

Answer 4

在使用Css时，我们删除了像

这样的空选项

<option value="?undefind"></option>

所以在Usiing Css的同时，我们可以删除空的选项。

显示在这个小提琴中

http://jsfiddle.net/KN9xx/1060/

AngularJS select：删除空选项并使用数据对象而不是数组

4 个答案: