Question

是否可以正确呈现一个选择，有一些选项，其中一个值为空？

我将提供一个简单的例子：

$scope.value = null;
$scope.list = [{ id: null, description: "none"},
    { id:1, description: "one" },
    { id:2, description: "two" },
    { id:3, description: "three" }];

html：

<select ng-model="value" ng-options="item.id as item.description for item in list">
</select>

Plunker：http://plnkr.co/edit/ECQ3XUnv75sJW4Ix8IyO

渲染后一切正常（没有选中），但是当我点击进入选择时，还有一个额外的选项 - 空（而$scope.value是null时，“空”选项仍然存在）。当我选择其他选项而$scope.value不是null时，一切似乎都有效。是否有某种方法可以删除浏览器生成的空选项，而模型为null？

在Firefox，Chrome和Safari上，此行为相同。

Answer 1

您可以使用undefined代替null使其工作，并删除默认值的id属性：

angular.module('app', [])
.controller('MainCtrl', function($scope) {
    $scope.value = undefined;
    $scope.list = [{ description: "none"},
        { id:1, description: "one" },
        { id:2, description: "two" },
        { id:3, description: "three" }]

});

Answer 2

您不必手动添加无意义的空值选项。您只需要将空option添加到HTML中：

<select ng-model="value" ng-options="item.id as item.description for item in list">
    <option value="">none</option>
</select>

控制器：

$scope.list = [
    { id:1, description: "one" },
    { id:2, description: "two" },
    { id:3, description: "three" }
];

选择空值

2 个答案:

演示：http://plnkr.co/edit/8j9NUT3rUfwUj4QJhZqa?p=preview