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'元素：

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

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

从UI的角度来看，我认为这不是理想的 - 有没有人知道是什么导致这种情况以及它是否可以避免？

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

谢谢。

Answer 1

是angular添加了一个空选项，你无法做任何事情......但根据你的需要，我建议你重构一下：

controller（删除空的第一个对象）：

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

这样，你就可以得到你的＆＃34; null＆＃34;选项而不是空的

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

Answer 2

LocalDateTime.now()

具有空值的AngularJS select语句

2 个答案: