Javascript 在AngularJS中取消选择选项下拉列表

我已经使用ng选项创建了一个select下拉列表，用于筛选页面上的列表。当页面加载时，下拉列表为空且未进行筛选

当我选择一个选项时，过滤会正确地发生，但是空白选项消失，因此，除非刷新页面并重新启动，否则我不得不有一个部门过滤版本的列表：

之前：

之后：

这是我的密码：

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

部门：





{{e.Department}}

<>我希望能够把它返回空白选项，这样我就有了一个完全未过滤的列表。执行value=”“选项或完全为空都不起作用，因为它是基于值进行过滤的，没有任何内容与空值匹配

---

任何帮助或指导都将不胜感激

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

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

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

如果您有复杂的筛选要求，最好使用函数作为筛选器

将空选项添加到“选择”：

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

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

---

谢谢大家的回复，我把你们的一些回复混合在一起，加上一块手表，实现了我想要的，以下是我的结论：

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

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

---

再次感谢你的帮助

这里有一个解决方案，它不需要在控制器上添加额外的$watch

如前所述，第一步是向select添加一个空选项：

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

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

---

希望这能帮一些人省去一些麻烦：）

这是一个很好的解决方案。过滤在angular 1.2.0中被更改，因此null被认为是有效的搜索值，而undefined意味着没有应用过滤。非常酷！请注意，因为如果有人选择该空白选项，它将是

null

，这与

undefined

的默认未选择选择值不同。

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

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

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