选择过滤器无法正常工作，Angular js ng-options

Question

Hi there,
I am new to angular.
In my current demo app I created some users list with select filter ng-option.
there is some bug that I didn't mange to find.
The bug:
When I choosing the Female it filters ok and shows me only Female users
But when I choosing the Male option it shows me full list and don't filtering the Female users.
here is 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>&nbsp;{{user.hobby}}</p>
                 <p><b>Gender:</b>&nbsp;{{user.gender}}</p>
            </li>
        </ul>

    </div>
</div>

the controller-page:

    zenvaControllers.controller('UserListCtrl', ['$scope', 'User', function ($scope, User) {
    $scope.users = User.query();
    $scope.genders = ["Male", "Female"];
}]);

json-page:

  [
    {
        "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"
    }
]

Thanks in Advance.

Answer 1

I would write two custom filters that should take care for both cases:

hobbyFilter and genderFilter

Demo Plunker

iApp.filter('hobbyFilter', function() {
   return function( items, query) {
    var filtered = [];


    if(query.hobby === undefined || query.hobby === ''){
      return items;
    }

    angular.forEach(items, function(item) {
      console.log(item.gender, query.gender);
      if(
        query.hobby !== undefined &&
        query.hobby !== '' &&
        item.hobby.indexOf(query.hobby) >= 0)
        {
          filtered.push(item);
        }
    });

    return filtered;
  };
});


 iApp.filter('genderFilter', function() {
   return function( items, query) {

    var filtered = [];


    if(query.gender === undefined || query.gender === ''){
      return items;
    }

    angular.forEach(items, function(item) {

      if(item.gender === query.gender){
        filtered.push(item);
      }
    });

    return filtered;
  };
});

Usage

<li ng-repeat="user in users |  genderFilter:query |  hobbyFilter:query">