mardi 28 juin 2016

Angular filter with multiple checkboxes in separate filters

I do something wrong because I can't achieve the result that I need.

My JSON data looks like this

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

So I need to filter data by type_id and brand_id It has not to be a complicated task but stuck a lot and I will appreciate for any help from you I just can't handle it for now.

And this is how my view looks like. I have two filters that generated by ng-repeat and ng-repeat for devices I need to filter by type and brand filter.

// 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="" id="filter-" ng-model="item.id" ng-checked="item.id">
               <label for="filter-">
               <span></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="" id="brand-" ng-model="brand.id">
               <label for="brand-">
               <img ng-src="" alt="">
               <span></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="" alt="">
      </figure>
      <!-- /img -->
      <h3 class="card__title"></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) {

            })
        }])




Aucun commentaire:

Enregistrer un commentaire