具有空值的AngularJS选择语句

Question

我需要在 AngularJS 中显示一个包含单个空值选项的选择列表。这是 Angular 控制器的存根：

function BookController($scope) {
    $scope.book = {
        titleId: null
    };

    $scope.titles = [
        {id: null, text: "Book Title <null>"},
        {id: 1,    text: "Book Title #1"},
        {id: 2,    text: "Book Title #2"},
        {id: 3,    text: "Book Title #3"}
    ];
}

这可以按预期工作，但有一个例外，Angular 似乎在列表的头部插入了一个额外的空白“选项”元素：

<option value="" selected="selected" label=""></option>

此选项似乎不会对该功能产生不利影响 - 即使用户选择它，选择列表也会选择第一个“真实”选项。有趣的是（？）此选项仅在选择 null 选项时出现，如果选择了 value/non-null 选项，则空白选项消失。

从 UI 的角度来看，我认为这并不理想 - 有谁知道这是什么原因造成的以及是否可以避免？

这里有一个 JSFiddle https://jsfiddle.net/xab21mrr/4/

谢谢。

Answer 1

是的，角度添加了一个空选项，您对此无能为力..但根据您的需要，我建议您进行一些重构：

控制器（删除空的第一个对象）：

$scope.titles = [
    {id: 1,    text: "Book Title #1"},
    {id: 2,    text: "Book Title #2"},
    {id: 3,    text: "Book Title #3"}
];

模板：

<select ng-model="book.titleId" ng-options="title.id as title.text for title in titles">
    <option value="">Book Title null</option>
</select>

这样，您将拥有“null”选项而不是空选项

编辑：自此错误已修复（感谢 JB Nizet 对此的评论）。不过，您可能需要此重构，因为它是显示与任何服务器数据无关的空/重置选项的标准方式）

Answer 2

<select ng-model="book.titleId" ng-options="title.id as title.text for title in titles">
  <option value="" disabled selected style="display: none;">Select book</option>
</select>