javascript - 在 AngularJS 中取消选择 ng-options 下拉菜单

Question

我使用 ng-options 创建了一个选择下拉列表，用于过滤页面上的列表。当页面加载时，下拉列表是空白的，没有发生过滤。

当我选择一个选项时，过滤会正常进行，但空白选项会消失，因此我必须拥有一个部门过滤版本的列表，除非我刷新页面并重新开始:

之前:

之后:

这是我的代码:

.html 文件:

         Department:
        <select ng-model="search.SubDepartmentID" ng-options="d.SubDepartmentID as d.DepartmentLabel for d in DepartmentList"></select>
        
        <br />
        <div class="span10">
            <!--Body content-->

            <ul>
                <li ng-repeat="(index,e) in filteredEmployees | filter:search | orderBy:orderProp | startFrom:(currentPage - 1)*pageSize | limitTo:pageSize"
                    class="thumbnail employee-listing">
                    <a href="#/Employee/{{e.EmployeeID}}" class="thumb">
                        <img style="height: 100px; width: auto;" ng-src="../Images/CurrentEmployees/{{e.ImageName}}"></a>
                    <p><a href="#/Employee/{{e.EmployeeID}}">{{e.FullName}}</a></p>
                    <p>{{e.Department}}</p>
                </li>
            </ul>

我希望能够将它返回到空白选项，以便我有一个完全未过滤的列表。执行 value=""选项或完全为空是行不通的，因为它是基于值进行过滤，没有任何内容与空值匹配。

如有任何帮助或指导，我们将不胜感激!

Answer 1

感谢大家的回复，我混合了一些您的回复，添加到 watch 中并实现了我想要的，这是我最终得到的:

<select ng-model="search.SubDepartmentID" ng-options="d.SubDepartmentID as d.DepartmentLabel for d in DepartmentList"><option value=""></option></select>

所以我确实添加了空值，但我修改了 Controller 中已有的 watch ，如果它返回 null，则将 $scope.search.SubDepartmentID 设置为未定义:

$scope.$watchCollection('[search.$, search.Status, search.SubDepartmentID]', function (newSearch) {
    if ($scope.search != undefined) {
        if ($scope.search.SubDepartmentID == null) {
            $scope.search.SubDepartmentID = undefined;
        }
    }
});

$scope.search.SubDepartmentID 在页面加载时未定义，在选择空值时将其重置为未定义就成功了!

再次感谢您的帮助!