1

您好，
我是 Angular 新手。
在我当前的演示应用程序中，我使用选择过滤器 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"
    }
]

提前致谢。

4

1 回答 1

0

我会编写两个自定义过滤器来处理这两种情况：

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">
于 2014-04-28T11:03:50.457 回答