Параметр ng-options по умолчанию, который отображает все параметры

У меня есть список выбора ng-options, в котором я хочу, чтобы был параметр по умолчанию, отображающий все параметры; Когда вы щелкаете элемент в списке, он должен фильтроваться, когда вы нажимаете значение по умолчанию, он должен отображать все значения. Я мог бы поклясться, что в прошлом я мог сделать это, используя элемент html option со значением, установленным на «», но это не работает, может кто-нибудь помочь мне решить это. Скрипка ниже.

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>

спасибо


javascript angularjs ng-options
person Alex Haines    schedule 14.01.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

С наилучшими пожеланиями

Егор

person Egor Malkevich    schedule 14.01.2016

arrow_upward
0
arrow_downward

Ваша проблема в том, что значение параметров по умолчанию интерпретируется как null. Поэтому, на мой взгляд, самый простой способ решить вашу проблему - просто добавить часы к вашему фильтру и преобразовать его в пустую строку, когда она не определена.

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

Скрипка

person Y.Puzyrenko    schedule 14.01.2016