6

我一直在寻找关于如何删除 AngularJS 总是在选择中呈现的空选项的解释。I have found lots of information doing this when the options are derived from a JSON array placed directly in the code, but I can't find anything about removing this empty option when working with data objects.

假设我的数据库中有对象“foo”，而“foo”同时具有“名称”和“bar_id”。

有人可以给我一个关于使用数据对象执行此操作的线索吗？

参考： Angular JS 从选择选项中删除空白选项

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 将成为记录中的一个识别参数，以拉起并显示“更改时”（立即选择的选项）。

我已经尝试了我能想到的一切来设置它，但似乎没有任何效果。最糟糕的是，它要么默默地失败，让我没有任何迹象表明我做错了什么，要么抱怨 foo 不是一个对象，这让我无休止地沮丧。（我向你保证，“foo”是由我正在处理的实际代码中的 AJAX 请求加载的，并且在其他任何地方都可以作为对象正常工作——尽管 NDA 禁止我共享实际代码，抱歉。）

使用来自另一个线程的上述示例，我知道我会ng-model="typeOptions"在模板中的 select 标记中分配类似的内容，但是我将如何让“typeOptions”访问 foo 并使 foo.name 选项标签和 foo.bar_id 选项值? 此外，选项的默认角度值（看起来像生成的索引）对我来说很好，但我仍然需要调用 foo.bar_id 来完成任务，所以它必须“在某个地方”。

任何帮助，将不胜感激; 目前，我在选项本身中遇到了骇人听闻的 ng-repeat，我知道这不是最佳实践。而且我在 Angular 上还很新，仍然觉得它有些混乱，所以你的答案更简单、更直接，我就能更好地成功使用它们。谢谢！

4

4 回答 4

10

更新

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

控制：

$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/

有关更多选项，请查看手册。特别是在：

ngOptions (optional) » 用于对象数据源：

上一个答案：

正如我在评论中所写，使用ngOptions：

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

  2. 你总是需要两个单独的模型。One which acts as the list of options (this should probably always be an array of objects) and one to store the selected value (this will then differ in regards to how you set up the ngOptionsdirective).

  3. 提示：臭名昭著的空白选项总是当角度无法匹配分配ngModel给选项列表并且没有设置真正的空白选项时的结果。（注意：如果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 as value -->
<select
  data-ng-model="asValue"
  data-ng-options="foo.id as foo.name for foo in options"
></select>

<!-- select as object -->
<select
  data-ng-model="asObject"
  data-ng-options="foo as foo.name for foo in options"
></select>

<!-- the notorious blank option -->
<select
  data-ng-model="asBogus"
  data-ng-options="foo as foo.name for foo in options"
></select>

<!-- blank option correctly set up -->
<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/

于 2014-08-26T07:06:41.260 回答
1

只是作为对整个数据对象问题的跟进发布......

为了完成这项工作，我必须首先正确指定 ng-options。我在其他地方提到过，我在学习 AngularJS 时反复出现的个人问题之一是“过度思考”事情并不必要地让自己感到困惑，这也不例外。在与在此应用程序上编写控制器脚本的同事协商后，使用我的“foo.bar”伪名称，这就是我需要设置 HTML 模板的方式：

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

我希望将此选择设置为当前显示的“bar”（与此“foo”具有的“bars”完整列表中的第一个索引“bar”相反），所以我必须在传递此数据对象并为模型添加的应用程序控制器（我将其称为 $selected_item）：

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

这是一个非常复杂的数据结构，有很多存储过程和连接表，所以我不能轻松地将它转换成一个有效的伪对象/属性示例。Yoshi，你很有帮助；这里的沟通差距都是我的坏人。谢谢你一直陪着我。

对于可能偶然发现此线程的其他困惑的 AngularJS n00bs：我“过度思考”并让自己困惑的地方是错误地认为我需要某种代码来代替我研究的许多示例的 JSON 数组，以传递数据对象。这是不正确的——关于传入数据对象和/或其属性，“什么都没有”需要去那里。数据对象的属性直接传递到模板中，在select标签本身内，使用ng-options. 因此，如果其他人发现自己对此感到困惑，那么您可能会犯我犯的两个错误：（1）认为“其他东西”应该替换在线使用的 JSON 数组示例和（2）您的 ng-options 没有写正确。

Angular 有时确实让我觉得自己很愚蠢！！这很有趣，也很有挑战性，但有时它只会让我觉得自己像个白痴。:-)

于 2014-08-27T21:41:31.823 回答
1 

<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>

于 2015-05-20T11:08:47.243 回答
0

在使用 Css 时，我们删除了 Empty 选项，例如

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

因此，在使用 Css 时，我们可以删除空选项。

显示在这个小提琴中

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

于 2016-12-07T05:18:15.443 回答