javascript - Angular : Filter Multiple Items

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

我认为这可能就是您正在寻找的内容(在最后运行代码片段)，或者给您一个或两个想法。您可能需要根据您的目的重新组织一些代码。

要点是:

• 基于独特品种和动物的 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 上使用内置过滤器，并为其表达式提供一个函数，该函数对于从复选框中选定的项目计算结果为 true。

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

• 并创建该函数:

  $scope.check = function(selected) { return function(item) {<br/> 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>