BradGreens BradGreens - 3 months ago 16
Javascript Question

Angular ng-options "None" not working as expected when filtering results with an ng-repeat directive

I have reduced my app to the case below. I have two implementations of a select box, one with hard coded options and one using ng-options.

If you select a topic, and then go back to select "None", you'll observe the second example does not work the same way as the first example. I can't seem to configure ng-options correctly to get the behavior in the first example. The desired behavior is to show all items in the

friends
and
friends2
lists when no topic is selected.

<!doctype html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.19/angular.min.js"></script>
<script>
angular.module('demoApp', []).controller('DemoController', function($scope) {

$scope.friends = [
{name:'John', phone:'555-1276', topic: 'Baseball History', tags: ['Television, Sports']},
{name:'Mary', phone:'800-BIG-MARY', topic: 'Presidential History', tags: ['Sports, America']},
{name:'Mike', phone:'555-4321', topic: 'TV History', tags: ['History']},
{name:'Adam', phone:'555-5678', topic: 'Texas Trivia', tags: ['Television, Sports, America, Politics']},
{name:'Julie', phone:'555-8765', topic: '', tags: ['Sports']},
{name:'Juliette', phone:'555-5678'},
{name:'Cliff', phone:'555-4444', topic: 'Baseball History', tags: ['Television']},
{name:'Brad', phone:'800-HEYYOOO', topic: 'Presidential History', tags: ['Politics, America']},
{name:'Susanne', phone:'555-5557', topic: 'TV History', tags: ['History']},
{name:'Michelle', phone:'555-7777', topic: 'Texas Trivia', tags: ['Television, Sports, America']},
{name:'Julie', phone:'555-1111', topic: '', tags: ['Sports']},
{name:'Juliette', phone:'555-2222'}
];

$scope.friends2 = [
{name:'John', phone:'555-1276', topic: 'Baseball History', tags: ['Television, Sports']},
{name:'Mary', phone:'800-BIG-MARY', topic: 'Presidential History', tags: ['Sports, America']},
{name:'Mike', phone:'555-4321', topic: 'TV History', tags: ['History']},
{name:'Adam', phone:'555-5678', topic: 'Texas Trivia', tags: ['Television, Sports, America, Politics']},
{name:'Julie', phone:'555-8765', topic: '', tags: ['Sports']},
{name:'Juliette', phone:'555-5678'},
{name:'Cliff', phone:'555-4444', topic: 'Baseball History', tags: ['Television']},
{name:'Brad', phone:'800-HEYYOOO', topic: 'Presidential History', tags: ['Politics, America']},
{name:'Susanne', phone:'555-5557', topic: 'TV History', tags: ['History']},
{name:'Michelle', phone:'555-7777', topic: 'Texas Trivia', tags: ['Television, Sports, America']},
{name:'Julie', phone:'555-1111', topic: '', tags: ['Sports']},
{name:'Juliette', phone:'555-2222'}
];

$scope.options = [
{title: "Baseball History"},
{title: "Presidential History"},
{title: "TV History"},
{title: "Texas Trivia"}
]
});
</script>
</head>
<body ng-app="demoApp" ng-controller="DemoController">
<hr>
Working select boxes, "None" works as expected.
<hr>
<br>by Topic
<select ng-model="search.topic">
<option value="">None</option>
<option value="Baseball History">Baseball History</option>
<option value="Presidential History">Presidential History</option>
<option value="TV History">TV History</option>
<option value="Texas Trivia">Texas Trivia</option>
</select>
Selected: {{search.topic}}
<br>
<table id="searchObjResults">
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
<tr ng-repeat="friendObj in friends | filter:search">
<td>{{friendObj.name}}</td>
<td>{{friendObj.phone}}</td>
</tr>
</table>
<hr>
Working select boxes, "None" does not work as expected. All items are cleared.
<hr>
<br>by Topic
<select ng-model="search2.topic" ng-options="option.title as option.title for option in options">
<option value="">None</option>
</select>
Selected: {{search2.topic}}
<br>
<table id="searchObjResults">
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
<tr ng-repeat="friendObj2 in friends2 | filter:search2">
<td>{{friendObj2.name}}</td>
<td>{{friendObj2.phone}}</td>
</tr>
</table>
</body>
</html>


Plunkr: http://plnkr.co/edit/BCQrDYJoag7Fh0hPtwmk

In both examples, the value of the first option element is an empty string, however they behave differently. It has not been easy searching for another example of this.

Thanks for any suggestions.

Answer
As you have not included "None" in the options list,

1) You can either declare "None" in options list
2) you can use ng-repeat for the options. Please see below :

 <select ng-model="search2.topic">
      <option value="">None</option>
      <option ng-repeat="option in options">{{option.title}}</option>
    </select>

Here is the plunker
http://plnkr.co/edit/KgTLxjqT8fH9UAco1D4w?p=preview
Comments