javascript - add < and > sign in ng-repeat and filter accordingly -
i have data on bikes on html page, have filter on page 'brand', 'year' , price. although brand , year filter working fine have issue price filter.
so have less , greater sign conditionally. have show < sign price 50000 , > price 500000. , apply filter accordingly
<div ng-app='app' class="filters_ct" ng-controller="mainctrl mainctrl"> <ul class="nav"> <li ng-repeat="filter in filters" ng-class="{sel: $index == selected}"> <span class="filters_ct_status"></span> {{filter.name}} <ul> <li ng-repeat="filtervalue in filter.lists"> <input ng-checked="activefilters.brand[filtervalue] !== undefined" ng-click="togglefilter(filter.name, filtervalue)" type="checkbox"> {{filtervalue}} </li> </ul> </li> </ul> <div ng-controller="listctrl listctrl"> <div class="list" ng-repeat="list in lists | filter: activefilters"> {{list.brand}}, {{list.year}} , {{list.price}} </div> </div> </div> angular
var app = angular.module('app', []); app.controller('mainctrl', function($scope) { $scope.activefilters = { }; $scope.filters = [ { name: "brand", lists: ['yamaha','ducati','ktm','honda'] }, { name: "year", lists: [2012,2014,2015] },{ name:"price", lists:[50000,100000,20000,500000] } ]; $scope.togglefilter= function(filtername, filtervalue) { if ($scope.activefilters[filtername] === undefined) { $scope.activefilters[filtername] = filtervalue; } else { delete $scope.activefilters[filtername]; } }; }); app.controller('listctrl', function($scope) { $scope.lists = [ { "brand": "ducati", 'year': 2012, 'price':40000 }, { 'brand': "honda", 'year': 2014, 'price':50000 }, { 'brand': "yamaha", 'year': 2015, 'price':200000 }, { 'brand': "ktm", 'year': 2012, 'price':500000 }, { 'brand': "ktm", 'year': 2015, 'price':800000 } ]; });
i think best way achieve write custom filter. also, remember update price checkboxes user can choose 1 @ time. can have @ here: http://jsfiddle.net/so9x7qpy/
angular.module('app', []) .controller('mainctrl', function($scope) { $scope.activefilters = {}; $scope.filters = [ { name: "brand", lists: ['yamaha','ducati','ktm','honda'] }, { name: "year", lists: [2012,2014,2015] }, { name:"price", lists:['< 50000', '50000','100000','200000','500000', '> 500000'] } ]; $scope.togglefilter= function(filtername, filtervalue) { if (!$scope.activefilters[filtername]) { $scope.activefilters[filtername] = []; return $scope.activefilters[filtername].push(filtervalue); } var curfilter = $scope.activefilters[filtername]; var = curfilter.indexof(filtervalue); if (i === -1) { curfilter.push(filtervalue); } else { curfilter.splice(i, 1); } if (filtername === 'price' && curfilter.length > 1) { curfilter.shift(); } }; }) .controller('listctrl', function($scope) { $scope.lists = [ { "brand": "ducati", 'year': 2012, 'price':40000 }, { 'brand': "honda", 'year': 2014, 'price':50000 }, { 'brand': "yamaha", 'year': 2015, 'price':200000 }, { 'brand': "ktm", 'year': 2012, 'price':500000 }, { 'brand': "ktm", 'year': 2015, 'price':800000 } ]; }) .filter('myfilter', function() { return function(data, filter) { var list = []; for (var = 0; < data.length; i++) { var item = data[i]; if (filter.brand && filter.brand.length > 0 && filter.brand.indexof(item.brand) === -1) continue; if (filter.year && filter.year.length > 0 && filter.year.indexof(item.year) === -1) continue; if (filter.price && filter.price.length > 0) { var re = /<|>/; if (re.test(filter.price)) { if (eval(item.price + filter.price)) { list.push(item); } } else { if (eval(item.price == filter.price)) { list.push(item); } } } else { list.push(item); } } return list; } });.sel { color:red } .nav > li { float:left; list-style:none; padding-right:20px } .subul { display:none } .sel ul { display:block; list-style:none; padding-left:0 } .list { padding-top:30px; clear:both }<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app='app' class="filters_ct" ng-controller="mainctrl mainctrl"> <ul class="nav"> <li ng-repeat="filter in filters" ng-class="{sel: $index == selected}"> <span class="filters_ct_status"></span> {{filter.name}} <ul> <li ng-repeat="filtervalue in filter.lists"> <input ng-checked="activefilters[filter.name] && activefilters[filter.name].indexof(filtervalue) !== -1" ng-click="togglefilter(filter.name, filtervalue)" type="checkbox"> {{filtervalue}} </li> </ul> </li> </ul> <div ng-controller="listctrl listctrl"> <div class="list" ng-repeat="list in lists | myfilter: activefilters"> {{list.brand}}, {{list.year}} , {{list.price}} </div> </div> </div>
Comments
Post a Comment