在单独的过滤器中具有多个复选框的角度过滤器

Question

我做错了，因为我无法达到我需要的结果。

我的 JSON 数据如下所示

[{
type_id: 1, 
brand_id: 0,
name: 'Title',
description: 'Description',
img: 'url'
},...]

所以我需要通过type_id 和brand_id 过滤数据 这不是一项复杂的任务，但会遇到很多困难，我将感谢您的任何帮助，我现在无法处理。

这就是我的看法。我有两个由 ng-repeat 生成的过滤器 和 ng-repeat 用于我需要按类型和品牌过滤器过滤的设备。

// filter 1
<div class="filters">
   <h3 class="filters__title">Choose by type</h3>
   <div class="swiper-container">
      <div class="swiper-arrow-prev"></div>
      <div class="swiper-arrow-next"></div>
      <div class="swiper-overflow">
         <div class="swiper-wrapper filter" data-id="type">
            <div class="swiper-slide filter__checkbox" ng-repeat="item in types">
               <input type="checkbox" name="{{item.id}}" id="filter-{{item.id}}" ng-model="item.id" ng-checked="item.id">
               <label for="filter-{{item.id}}">
               <span>{{item.type}}</span>
               </label>
            </div>
            <!-- /item -->
         </div>
         <!-- /filter -->
      </div>
   </div>
</div>
<!-- /filters -->

// filter 2
<div class="filters">
   <h3 class="filters__title">Choose by brand</h3>
   <div class="swiper-container">
      <div class="swiper-arrow-prev"></div>
      <div class="swiper-arrow-next"></div>
      <div class="swiper-overflow">
         <div class="swiper-wrapper filter" data-id="brands">
            <div class="swiper-slide filter__checkbox" ng-repeat="brand in brands">
               <input type="checkbox" name="{{brand.id}}" id="brand-{{brand.id}}" ng-model="brand.id">
               <label for="brand-{{brand.id}}">
               <img ng-src="{{brand.img}}" alt="">
               <span>{{brand.name}}</span>
               </label>
            </div>
            <!-- /item -->
         </div>
         <!-- /filter -->
      </div>
      <!-- /swiper-overflow -->
   </div>
   <!-- /swiper-container -->
</div>
<!-- /filters -->


<div class="card" ng-repeat="device in devices">
   <div class="card__wrap">
      <figure>
         <img ng-src="{{device.img}}" alt="">
      </figure>
      <!-- /img -->
      <h3 class="card__title">{{device.model}}</h3>
   </div>
</div>
<!-- /card -->


angular.module('app', []).controller('mainCtrl', ['$scope', 'dataJSON', '_', function($scope, dataJSON, _) {
            $scope.filterContainer = [];

            // get Data
            dataJSON.getPromise().then(function(data) {
                $scope.brands = data.brands;
                $scope.devices = data.devices;
                $scope.types = data.device_types;

                return data.devices;
            }).then(function(data) {

            })
        }])

Answer 1

您可以使用以下代码进行过滤

// let take two input 
<input ng-model="type_id_model"><input ng-model="brand_id_model">


// filter 1
    ng-repeat="item in types | filter:{type_id : type_id_model}"
// filter 2
    ng-repeat="brand in brands | filter:{brand_id : brand_id_model}"