Javascript 角度：过滤多个项目

我是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>

我的计划是将LI的复选框转换为复选框，然后将我带到需要帮助的地方。有没有一种方法可以将我已经设置好的东西用于过滤多种动物和品种

---

感谢所有能够提供帮助的人。

我想这可能就是您想要的（在最后运行代码片段），或者给您一个或两个想法。您可能需要重新组织代码以达到某些目的

重点是：

• 根据独特的品种和动物重新设置重复复选框。我使用了ui.filters中的唯一过滤器，但您可以自己使用

  {{item.breed}
  

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

• 创建该功能：

  $scope.check=函数（选定）{
  返回函数（项）{
  
  如果（选中[项目.动物]| |选中[项目.品种]）
  返回true；
  其他的
  返回false；
  };
  }

总之

var-app=angular.module（'testApp'，['ui.directives'，'ui.filters']）；
app.controller（'testCtrl'，函数（$scope）{
$scope.selected={}；
$scope.animal_数据=[{
“id”：“0”，
“动物”：“猫”，
“品种”：“暹罗”，
“姓名”：“凯文”，
“照片”：“/images/kevin.jpg”
}, {
“id”：“1”，
“动物”：“狗”，
“品种”：“哈巴狗”，
“姓名”：“巴尼”，
“照片”：“/images/barney.jpg”
}, {
“id”：“2”，
“动物”：“狗”，
“品种”：“贵宾犬”，
“姓名”：“查理”，
“照片”：“/images/barney.jpg”
}];
$scope.check=功能（选定）{
返回函数（项目）{
如果（选中[项目.动物]| |选中[项目.品种]）
返回true；
其他的
返回false；
};
}
$scope.filterData=函数（项）{
var passFilterType=$filter（'filterType'）（$scope.original_data，item）；
如果（passFilterType.length>0）{
$scope.isLoading=true；
$scope.issucessful=false；
$scope.percentLoaded=0；
$scope.thumbnails=passFilterType；
loadImages（）；
}否则{
控制台日志（“错误”）；
}
}
});
函数loadImages（）{
var passImages=getImages（）；
如果（passImages.length>0）{
预加载。预加载映像（passImages）。然后（handleResolve、handleReject、handleNotify）；
}
}

{{item}

品种：
{{item.breed}

动物：
{{item.animal}}
动物
繁殖
名称
链接
{{item.animal}大写}
{{item.breed}
{{item.name}

$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);
       }
    }