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