CODEWITHSUNDEEP
javascriptangularjsng-options
Alex Haines
Alex Haines

Reputation: 47

ng-options default option that displays all options

I have a ng-options pick list that I want there to be a default option that displays all options; When you click an item in the list it should filter when you click on the default value it should show all values. I could have sworn in the past I was able to do this using an option html element with a value set to "", but this is not working, can someone help me work this out. Fiddle below.

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>

thanks

Upvotes: 0

Views: 93

Answers (2)

Y.Puzyrenko
Y.Puzyrenko

Reputation: 2195

Your problem is that your default options value is interpreted as null So in my opinion the easies way to solve your issue is just add watch to your filter and convert it to empty string when it's not defined.

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

Fiddle

Upvotes: 0

Egor Malkevich
Egor Malkevich

Reputation: 1536

The @mrust is right, but in your case you can just use simple search logic as that example provide

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

this code more important to understand how organize search by one or multiple fields using default filter

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

Best regards

Egor

Upvotes: 1

Related Questions