ng-options顯示所有選項的默認選項

Question

我有一個ng-options選擇列表，我希望有一個顯示所有選項的默認選項。 單擊列表中的項目時，單擊默認值時應進行過濾，它應顯示所有值。 我過去可能發誓，我可以使用選項html元素（其值設置為“”）來執行此操作，但是此操作無效，有人可以幫助我解決此問題。 小提琴下面。

http://jsfiddle.net/nzfks0rq/

<select ng-model="todoFilter" ng-options="todo.name as todo.name for todo in todos" class='form-control'>
   <option value="">Choose Vendor</option>
</select>
<ul class="unstyled">
  <li ng-repeat="todo in todos | filter:{name: todoFilter}">
     {{todo.name}}
  </li>
</ul>

謝謝

Answer 1

@mrust是正確的，但是在您的情況下，您可以使用簡單的search邏輯，因為該示例提供了

<div ng-init="friends = [{name:'John', phone:'555-1276'},
                         {name:'Mary', phone:'800-BIG-MARY'},
                         {name:'Mike', phone:'555-4321'},
                         {name:'Adam', phone:'555-5678'},
                         {name:'Julie', phone:'555-8765'},
                         {name:'Juliette', phone:'555-5678'}]"></div>

<label>Search: <input ng-model="searchText"></label>
<table id="searchTextResults">
  <tr><th>Name</th><th>Phone</th></tr>
  <tr ng-repeat="friend in friends | filter:searchText">
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
  </tr>
</table>
<hr>

此代碼對於了解如何使用默認過濾器按一個或多個字段組織搜索更為重要

<label>Any: <input ng-model="search.$"></label> <br>
<label>Name only <input ng-model="search.name"></label><br>
<label>Phone only <input ng-model="search.phone"></label><br>
<label>Equality <input type="checkbox" ng-model="strict"></label><br>
<table id="searchObjResults">
  <tr><th>Name</th><th>Phone</th></tr>
  <tr ng-repeat="friendObj in friends | filter:search:strict">
    <td>{{friendObj.name}}</td>
    <td>{{friendObj.phone}}</td>
  </tr>
</table>

最好的祝福

埃戈爾

Answer 2

您可以創建一個自定義過濾器來處理此問題。 這是上一篇文章的示例： https : //stackoverflow.com/a/27118166/643779

Answer 3

您的問題是您的默認選項值被解釋為null所以我認為解決問題的簡便方法是將watch添加到過濾器中，然后在未定義時將其轉換為空字符串。

$scope.$watch('todoFilter', function(val){
  $scope.todoFilter = $scope.todoFilter? $scope.todoFilter : "";
});

小提琴