AngularJS - Filtering with multi-level JSON -
i have complex dataset in json includes location data hierarchal in nature, parent of region, child obj of state/country/province, , sub-child obj of cities. i'm trying filter on each of these data parts.
the filters on other values (phase , numbers) work correctly, location data doesn't. i'm assuming it's because of hierarchal nature of data, can't find filtering examples of hierarchal data in angular figure out i'm doing wrong.
plunkr: http://plnkr.co/edit/vaku7l?p=preview
var app = angular.module('plunker', ['angular.filter']); app.controller('mainctrl', function($scope, $anchorscroll, $location, $http) { $scope.cart = []; $scope.addtocart = function(index) { $scope.cart.push(index); $scope.cartcount = $scope.cart.length; } $scope.activerow = function(index) { $scope.selectedrow = index; $location.hash(); $anchorscroll('anchor-' + index); } $scope.gotoanchor = function(x) { var newhash = 'anchor' + x; } // data $scope.dataobject = data.list; $scope.locationobject = data.locations; });body{background:#eee;} div.cart{display:block;height:70px;background:silver;margin-left:20px;width:200px;padding:5px 10px;margin-bottom:20px;margin-top:20px;} .cart h1{color:#fff;line-height:20px;} .item-list-wrapper{height:400px;width:90%;border:1px solid #ddd;overflow-y:scroll;margin-left:20px;} .item-list-wrapper table td{padding:10px;vertical-align:middle;margin-bottom:10px;font-size:12px;} .item-list{height:auto;width:100%;margin-bottom:10px;box-shadow:0 2px 2px rgba(0,0,0,0.2);border:1px solid #fff;background:#efefe4;} .col-num{width:100px;} .col-compound{width:80px;} .filters{width:100%;clear:both;margin-left:20px;} .filters select{width:200px;} .filters column{height:100px;width:200px;display:inline-block;margin:0;padding:0;} .filters select{display:inline-block;} .region{font-weight:bolder;} .state{font-weight:normal;}<!doctype html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>angularjs plunker</title> <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> <link rel="stylesheet" href="angular-ui.min.css" /> <script> document.write('<base href="' + document.location + '" />'); </script> <link rel="stylesheet" href="style.css" /> <script data-require="angular.js@1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js" data-semver="1.4.7"></script> <script data-require="angular.js@1.4.x" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular-messages.js"></script> <script data-require="ui-bootstrap@*" data-semver="0.13.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.1/ui-bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.7/angular-filter.min.js"></script> <script src="angular-ui.min.js"></script> <script src="app.js"></script> <script src="http://zbl.me/test/103015.js"></script> <body ng-controller="mainctrl"> <div ng-view=""></div> <!--item-list-wrapper --> <div class="filters"> <h2>filter results</h2> <column> <select name="selectregion" class="form-control" ng-model="selectregion" ng-change="europeselected()" ng-options="location location.region location in locationobject | orderby: location.region:reverse"> <option value="">select region</option> </select> <select name="selectstate" class="form-control" ng-disabled="!selectregion" ng-model="selectstate" ng-options="state state.statename state in selectregion.states"> <option value="">select state/province/country</option> </select> <select name="selectcity" class="form-control" ng-disabled="!selectstate" ng-model="selectcity" ng-options="city city.cityname city in selectstate.cities"> <option value="">select city</option> </select> </column> <column> <select name="selectphase" class="form-control" ng-model="selectphase" ng-options="data.phase data.phase data in dataobject | unique: 'phase' | orderby: 'phase' "> <option value="">select phase</option> </select> <select name="selectnumber" class="form-control" ng-model="selectnumber" ng-options="data.number data.number data in dataobject | unique: 'compound' | orderby: 'compound' "> <option value="">select number</option> </select> </column> </div> <div class="cart"> <h1>cart: {{cartcount}}</h1></div> <div class="item-list-wrapper"> <table class="table table-condensed table-hover"> <tr ng-repeat="data in dataobject | filterby: ['location.region']: selectregion | filterby: ['state.statename']: selectstate | filterby: ['city.cityname']: selectcity | filterby:['phase']: selectphase | filterby:['number']: selectnumber" ng-click="activerow($index)"> <td class="column">{{data.phase}}</td> <td class="column col-num">{{data.number}}</td> <td class="column col-compound">{{data.compound}}</td> <td> <span ng-repeat="location in data.locations track $index" class="region">{{ location.region}}: <span ng-repeat="site in location.sites | unique: 'state'" class="state">{{site.state}} </span> </span> </td> <td><a href="" ng-click="addtocart()">add</a></td> </tr> </table> </div> </body> </html>
there might way angular, can custom filters. here's example -
http://plnkr.co/edit/cllbojkfmvcgxqzmnjac?p=preview
.filter('bycountry', function(){ return function(items, location) { var filtered = []; if (!location || !items.length) { return items; } items.foreach(function(itemelement, itemindex) { itemelement.locations.foreach(function(locationelement, locationindex) { if (locationelement.region === location.region) { filtered.push(itemelement); return false; } }); }); return filtered; }; })
Comments
Post a Comment