Question

我是棱角分明的新手，我遇到过滤功能问题。

首先，内容将从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-reapeat复选框基于独特的品种和动物。我使用了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) { 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>

Angular：过滤多个项目

1 个答案: