取消选择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

感谢大家的回复，我收集了一些你的回复，添加到手表中并实现我想要的，这是我最终得到的结果：

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

所以我确实添加了空值，但是我修改了我在控制器中已经拥有的监视器，如果它返回null，则将$ scope.search.SubDepartmentID设置为undefined：

$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在页面加载时未定义，并且在选择空值时将其重置为undefined就行了！

再次感谢您的帮助！

Answer 2

您需要在onload中放置一个空白选项

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

Answer 3

我不确定第一个答案是否适用于值=''，因为你的问题听起来像你曾经尝试过的那样。我会将value =设置为删除用于过滤的变量的函数。这样它重新实例化并再次设置为undefined。

Answer 4

如果您有复杂的过滤要求，最好将功能用作过滤器。

为选择添加一个空选项：

<select ng-model="...." ng-options="....">
    <option value=''>Choose a value</option>
</select>

为过滤器提供一个函数，该函数应对应显示的所有员工返回true：

<li ng-repeat="e in filteredEmployees | filter:filterEmployee>{{e.FullName}}</li> 

在控制器上：

$scope.filterEmployee = function(employee) {
    return !search.SubDepartmentID || employee.SubDepartmentID == search.SubDepartmentID    
}

Answer 5

此处的解决方案并不涉及向您的控制器添加额外的$ watch。

正如所建议的那样，第一步是在选择中添加一个空选项：

<select ng-model="typeFilter" ng-options="i.value as i.label for i in types">
  <option value=""></option>
</select>

但是，如果你使用这个值作为过滤器，这不会按预期工作，因为（正如@GruffBunny所指出的），在角度1.2+中，空选择被解释为空值，所以filter正在搜索null而不是应用过滤器。

我找到了解决这个问题的简单方法：

<div ng-repeat='item in items | filter:{type: typeFilter || undefined}'>
  {{item.name}} {{ item.type}}
</div>

也就是说，如果typeFilter的值不是真的，请将过滤器值设置为undefined（即不要应用过滤器）。请注意，如果0或false是有效的过滤器值，那么您需要更加细致入微。我还没有对此进行过测试，但在这种情况下应该采用以下方式：

 <div ng-repeat='item in items | filter:{type: typeFilter !== null ? typeFilter : undefined}'>
  {{item.name}} {{ item.type}}
</div>

希望这可以节省一些令人头疼的事情：）