Question

你好，
我是棱角分明的新人在我当前的演示应用程序中，我使用select filter ng-option创建了一些用户列表有一些我没有找到的错误。
错误：
当我选择女性时，它过滤确定并仅向我显示女性用户
但是当我选择时男性选项它显示我的完整列表，不过滤女性用户这是我的代码：
HTML页：

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

控制器页面：

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

JSON页：

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

先谢谢。

Answer 1

我会编写两个自定义过滤器，应该注意这两种情况：

hobbyFilter和genderFilter

演示 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;
  };
});

<强>用法

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

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

1 个答案: