1

こんにちは、
私はAngularが初めてです。
現在のデモ アプリでは、select filter ng-option を使用していくつかのユーザー リストを作成しました。
私が見つけられなかったいくつかのバグがあります。
バグ:
女性を選択すると、正常にフィルタリングされ、女性ユーザーのみが表示
されますが、男性オプションを選択すると、完全なリストが表示され、女性ユーザーはフィルタリングされません。
ここに私のコードがあります:
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>

コントローラーページ:

    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

両方のケースに対処する必要がある 2 つのカスタム フィルターを作成します。

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 に答える