hi i"m new to angularjs wanted to filter as like this format
i have three json values 1.phone manufacture name and 2.phone ram and 3. phone price
According to the manufacture the ram and price should be loaded and as per the price and ram and manufacture name the product list should of filtered
i know basic filtering but can"t able to in three checkbox
There is no easy way to create a filter on checkboxes in angular. What I would do is, for each foreign key of a product, link the ng-model of each checkbox to the key of an object. Then write a function that uses these object's to filter.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope , $http) {
// mobile price details
$http.get('https://api.myjson.com/bins/3el1e').then(function(res) {
$scope.priceList = res.data;
});
// mobile ram details
$http.get('https://api.myjson.com/bins/qcj6').then(function(res) {
$scope.ramList = res.data;
});
// mobile manufacture details
$http.get('https://api.myjson.com/bins/52t8y').then(function(res) {
$scope.manuNameList = res.data;
});
var allProductDetails = [];
// product details
$http.get('https://api.myjson.com/bins/42diq').then(function(res) {
allProductDetails = res.data;
});
// set the filter selection objects on the scope
// they will look like this:
// { name_1: false, name_2: false, name_3: false }
$scope.selectionManuName = {}
$scope.selectionRam = {}
$scope.selectionPrice = {}
$scope.filter = function() {
var filteredProductDetails = allProductDetails
filteredProductDetails = selectionFilter(filteredProductDetails, 'product_list_manufacture_name', $scope.selectionManuName)
filteredProductDetails = selectionFilter(filteredProductDetails, 'product_list_ram', $scope.selectionRam)
filteredProductDetails = selectionFilter(filteredProductDetails, 'product_list_price', $scope.selectionPrice)
return filteredProductDetails
}
function selectionFilter(products, propName, selection) {
var filteredProducts = []
// prevent undefined errors
if(products) {
//loop through the product
for(var i = 0; i < products.length; ++i) {
var product = products[i];
// an array of foreign keys, e.g. ram
var productPropIdArray = product[propName]
// check whether at least one of the values to filter on corresponds to one of the foreign keys
// algorithm:
// - start pretending no value is found
// - loop
// - if an id is selected and found in the product's foreign key array,
// add it to the filteredProducts array and stop the loop
var keep = false
singleProductCheck:
// loop through the values to filter on
for (var selectionId in selection) {
// check whether the corresponding checkbox is selected
if (selection[selectionId]) {
// loop through the array of foreign keys
for (var j = 0; j < productPropIdArray.length; ++j) {
productPropId = productPropIdArray[j]
if(productPropId === selectionId) {
keep = true
break singleProductCheck;
}
}
}
}
if (keep) {
filteredProducts.push(product)
}
}
}
return filteredProducts
}
});<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script data-require="[email protected]" src="https://code.angularjs.org/1.3.11/angular.js" data-semver="1.3.11"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
---------------------
<div class="form-check" ng-repeat="set_manu_name in manuNameList">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" ng-model="selectionManuName[set_manu_name.id]"/>{{set_manu_name.mobile_manu_name}}
</label>
</div>
---------------------
<div class="form-check" ng-repeat="set_ram in ramList">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" ng-model="selectionRam[set_ram.id]"/>{{set_ram.ram}}
</label>
</div>
<br/>
---------------------
<div class="form-check" ng-repeat="set_price in priceList">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" ng-model="selectionPrice[set_price.id]" />{{set_price.mobile_price}}
</label>
</div>
---------------------
<div ng-repeat="productDetails in filter()">
<p>{{productDetails.product_list_name}}</p>
<p>{{productDetails.product_list_price}}</p>
<p>{{productDetails.product_list_ram}}</p>
<p>{{productDetails.product_list_manufacture_name}}</p>
/*/*/*/*/*/*/*/*/*/*/*/*/*/
</div>
</body>
</html>
