Angular：过滤多个项目

Question

我是 Angular 的新手，我遇到了过滤功能的问题。

首先，内容是从 json 文件中提取的。很简单：

[
 {
    "id":"0",
    "animal":"cat",
    "breed":"siamese",
    "name":"kevin",
    "photo": "/images/kevin.jpg"
 },
 {
    "id":"1",
    "animal":"dog",
    "breed":"pug",
    "name":"barney",
    "photo": "/images/barney.jpg"
 }
]

等等。

页面上的html。导航点来自他们自己的 json 文件，与数据无关，只是为了创建菜单并传递值：

<ul>
  <li ng-repeat="item in animal_data">
    <a href="" ng-click="filterData(item.animal)">{{item.animal | uppercase}}</a>
  </li>
</ul>

<ul>
  <li ng-repeat="item in breed_data">
    <a href="" ng-click="filterData(item.breed)">{{item.breed | uppercase}}</a>
  </li>
</ul>

过滤器脚本：

$scope.filterData = function(item)
   {           
       var passFilterType = $filter('filterType')($scope.original_data, item); 

       if(passFilterType.length > 0)  
       {
           $scope.isLoading = true;
           $scope.isSuccessful = false;
           $scope.percentLoaded = 0;   

            $scope.thumbnails = passFilterType;

           loadImages();

       }else{
            console.log("error");
       }
 }


   function loadImages()
    {
       var passImages = getImages();

       if(passImages.length > 0)
       {   
           preloader.preloadImages(passImages).then(handleResolve, handleReject, handleNotify);
       }
    }

我的计划是将 LI 转换为复选框，然后将我带到需要帮助的地步。有没有办法利用我已经设置的东西来过滤多种动物和品种？

感谢任何可以提供帮助的人。

Answer 1

我认为这可能是您正在寻找的内容（在最后运行代码 sn-p），或者给您一两个想法。您可能希望根据您的目的重新组织代码。

重点是：

• ng-repeat 复选框基于独特的品种和动物。我使用了 ui.filters 中的独特过滤器，但你可以自己滚动。

  <label ng-repeat="item in animal_data | unique:'breed'">{{item.breed}} <input type="checkbox" ng-model="selected[item.breed]"></input> </label>

• 使用 ng-repeat 上的内置过滤器列出结果，并为其表达式提供一个函数，该函数对于复选框中的选定项计算为真。

  <li ng-repeat="item in animal_data | filter:check(selected)">

• 并创建该函数：

  $scope.check = function(selected) { return function(item) {
if (selected[item.animal] || selected[item.breed]) return true; else return false; }; }

大家一起...

var app = angular.module('testApp', ['ui.directives', 'ui.filters']);

app.controller('testCtrl', function($scope) {
  $scope.selected = {};

  $scope.animal_data = [{
    "id": "0",
    "animal": "cat",
    "breed": "siamese",
    "name": "kevin",
    "photo": "/images/kevin.jpg"
  }, {
    "id": "1",
    "animal": "dog",
    "breed": "pug",
    "name": "barney",
    "photo": "/images/barney.jpg"
  }, {
    "id": "2",
    "animal": "dog",
    "breed": "poodle",
    "name": "charlie",
    "photo": "/images/barney.jpg"
  }];


  $scope.check = function(selected) {
    return function(item) {
      if (selected[item.animal] || selected[item.breed])
        return true;
      else
        return false;
    };
  }

  $scope.filterData = function(item) {
    var passFilterType = $filter('filterType')($scope.original_data, item);



    if (passFilterType.length > 0) {
      $scope.isLoading = true;
      $scope.isSuccessful = false;
      $scope.percentLoaded = 0;

      $scope.thumbnails = passFilterType;

      loadImages();

    } else {
      console.log("error");
    }
  }
});


function loadImages() {
  var passImages = getImages();

  if (passImages.length > 0) {
    preloader.preloadImages(passImages).then(handleResolve, handleReject, handleNotify);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<div ng-app='testApp'>
  <div ng-controller="testCtrl">

    <li ng-repeat="item in animal_data">{{item}}</li>
    <ul>
      BREED:
      <label ng-repeat="item in animal_data | unique:'breed'">{{item.breed}}
        <input type="checkbox" ng-model="selected[item.breed]"></input>
      </label>
      <br/>ANIMAL:
      <label ng-repeat="item in animal_data | unique:'animal'">{{item.animal}}
        <input ng-model="selected[item.animal]" type="checkbox"></input>
      </label>
      

      <table width="400">
        <thead>
          <th>animal</th>
          <th>breed</th>
          <th>name</th>
          <th>link</th>
          <tr ng-repeat="item in animal_data | filter:check(selected)">
            <td>{{item.animal | uppercase}}</td>
            <td>{{item.breed}}</td>
            <td>{{item.name}}</td>
            <td> <a href="" ng-click="filterData(item)">filterDataLink</a>
            </td>
          </tr>
      </table>

  </div>
</div>