This is my first question so please bear with my newbness.
I am trying to filter an array of objects by keywords using checkbox inputs. I want only the objects that contain all the keywords selected to show.
When each object only had 1 keyword it worked perfect, but now that each object has multiple keywords, I have been struggling to get it to work.
I have been trying to use this as a reference: http://ift.tt/1yAFmV5
I have tried many variations but this is the closest I get.
This current version is my latest attempt to use a for loop to cycle through the array, but now it doesn't really filter at all, but just toggles everything at once..
var app = angular.module("Grou", []);
app.controller('GrouCntrl', function($scope) {
$scope.title = 'download this awesome stuff!';
$scope.promo = 'this is the description text';
$scope.products =
[{
name: 'Bill',
keywords: ['standing', 'man', 'america'],
image: 'img/thumbnails/Bill.png'
},
{
name: 'Francois ',
keywords: ['man', 'sitting', 'europe'],
image: 'img/thumbnails/Bill.png'
},
{
name: 'jack ',
keywords: ['sitting'],
image: 'img/thumbnails/Bill.png'
},
{
name: 'jack ',
keywords: ['walking', 'woman'],
image: 'img/thumbnails/Bill.png'
},
{
name: 'jack ',
keywords: ['lying down', 'europe'],
image: 'img/thumbnails/Bill.png'
},
{
name: 'jack ',
keywords: ['sitting', 'america'],
image: 'img/thumbnails/Bill.png'
},
];
$scope.keywordsIncludes = [];
$scope.includesKeywords = function(keywords) {
var i = $.inArray(keywords, $scope.keywordsIncludes);
if (i > -1) {
$scope.keywordsIncludes.splice(i, 1);
} else {
$scope.keywordsIncludes.push(keywords);
}
}
$scope.keywordsFilter = function(products) {
if ($scope.keywordsIncludes.length > 0) {
var arrayLength = $.inArray(products.keywords).length;
for (i = 0; i < arrayLength; i++) {
if ($.inArray(products.keywords[i], $scope.keywordsIncludes) < 0)
return;
}
return products;
}
}
$scope.query = "";
$scope.search = function(product) {
if ($scope.query.length <= 0) return true;
var query =
("" + $scope.query).toLowerCase(),
fullName = [product.keywords].join(" ").toLowerCase();
return fullName.indexOf(query) > -1;
}
});
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://ift.tt/1M8ZV8j' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body ng-app="Grou">
<div class="header">
<div class="logo-box">
<div class="leftcontainer">
</div>
</div>
<div class="nav-bar">
<div class="container">
<button>a propos</button>
<button>accueil</button>
<button>pack</button>
<button>donation</button>
</div>
</div>
<div class="right-box">
<div class="container">
</div>
</div>
</div>
<div class="spacer">
</div>
<div class="bottomContainer">
<div ng-controller="GrouCntrl">
<div class="left-bar">
<div class="leftcontainer">
<br>
<br>
<input id="search-input" name="search" type="text" placeholder="chercher" ng-model="query">
<br>
<h4>Position</H4>
<input type="checkbox" ng-click="includesKeywords('standing')" />standing
</br/>
<input type="checkbox" ng-click="includesKeywords('sitting')" />sitting
</br/>
<input type="checkbox" ng-click="includesKeywords('walking')" />walking
</br/>
<input type="checkbox" ng-click="includesKeywords('lying down')" />lying down
</br/>
<br>
<h4>Another sub-header</h4>
<input type="checkbox" ng-click="includesKeywords('man')" />man
</br/>
<input type="checkbox" ng-click="includesKeywords('woman')" />woman
</br/>
<br>
<h4>Another sub-header</h4>
<input type="checkbox" ng-click="includesKeywords('america')" />america
</br/>
<input type="checkbox" ng-click="includesKeywords('europe')" />europe
</br/>
</div>
</div>
<div class="right-bar">
<div class="main">
<div class="container">
<h1> {{ title }} </h1>
<h2> {{ promo }} </h2>
</div>
<div class="productBox">
<div>
<div class="container">
</div>
<div>
<div ng-repeat="product in products | filter:keywordsFilter| filter:search" class="thumbnail-container">
<div>
<img ng-src="{{product.image}}" class="thumbnails">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Controllers -->
<script src="http://ift.tt/1QorA1I"></script>
<script src="http://ift.tt/1YrmKam"></script>
<script src="js/app.js"></script>
<script src="js/controllers/MainController.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Thanks in advance and feedback in my post appreciated.
Aucun commentaire:
Enregistrer un commentaire