Greetings,
I am a newcomer to angular.
In my current demo application, I have created a list of users with a select filter using ng-option.
There seems to be a bug that I have been unable to identify.
The issue:
When I select the Female option, it filters correctly and displays only Female users.
However, when I select the Male option, it shows the full list without filtering out Female users.
Here is a snippet of my code:
HTML page:
<div class="row" style="margin-top: 15px;">
<div class="col-lg-2 divPad">
<!--Sidebar content-->
<b>Sort by gender:</b>
<select ng-model="query.gender" class="btn btn-default" >
<option value="">All users</option>
<option ng-repeat="gender in genders" value="{{gender}}">{{gender}}</option>
</select>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="col-lg-2 divPad">
<b>Sort by Hobbies:</b>
<input class="form-control" ng-model="query.hobby" >
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="col-lg-12">
<ul class="phones">
<li ng-repeat="user in users | filter:query " class="thumbnail phone-listing">
<a href="#/users/{{user.name}}" class="thumb">
<img style="margin-top: 15px;" ng-src="{{user.imageUrl}}"></a>
<a href="#/users/{{user.name}}">{{user.name}}</a>
<p><b>Hobby:</b> {{user.hobby}}</p>
<p><b>Gender:</b> {{user.gender}}</p>
</li>
</ul>
</div>
</div>
The controller code:
zenvaControllers.controller('UserListCtrl', ['$scope', 'User', function ($scope, User) {
$scope.users = User.query();
$scope.genders = ["Male", "Female"];
}]);
JSON data:
[
{
"name": "Lucy",
"gender": "Female",
"hobby": "pets",
"imageUrl": "img/users/avatar1.png"
},
{
"name": "Betty",
"gender": "Female",
"hobby": "pets",
"imageUrl": "img/users/avatar2.png"
},
{
"name": "Ronald",
"gender": "Male",
"hobby": "music",
"imageUrl": "img/users/avatar3.png"
},
{
"name": "Christopher",
"gender": "Male",
"hobby": "sports",
"imageUrl": "img/users/avatar4.png"
},
{
"name": "Ximena",
"gender": "Female",
"hobby": "reading",
"imageUrl": "img/users/avatar5.png"
},
{
"name": "Paul",
"gender": "Male",
"hobby": "shopping",
"imageUrl": "img/users/avatar6.png"
},
{
"name": "Charlie",
"gender": "Male",
"hobby": "pets",
"imageUrl": "img/users/avatar7.png"
}
]
Appreciate any assistance provided.