javascript - Filter results based on URL and simultaneously select option in dropdown box using angular -
i beginner angular js framework, have made client-company table , filtered clients company name using drop down menu. if want filter results using url "#/client/company.name=a" , clicking on link filtered results shown- how can filter results based on url in angular js? have dynamically generated link how can filter results using url? here jsfiddle link
`
</div> </li> <li> <div class="btn-group" data-ng-class="{open: open}"> <button class="btn">filter company</button> <button class="btn dropdown-toggle" data-ng-click="open=!open"><span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownmenu"> <li><a data-ng-click="checkall()"><i class="icon-ok-sign"></i> check all</a> </li> </li> <li class="divider"></li> <li data-ng-repeat="company in companylist"> <a data-ng-click="setselectedclient()">{{company.name}}<span data-ng-class="ischecked(company.name)"></span></a> </li> </ul> </div> </li> </ul> <hr/> <h3>size table:</h3> <table class="table table-hover table-striped"> <thead> <tr> <th style="width:20%">company</th> <th style="width:40%">designation</th> <th style="width:30%">name</th> </tr> </thead> <tbody> <tr data-ng-repeat="client in filtered = (clients | companyfilter:selectedcompany)"> <td><a href= "#!/clients/name= {{client.company.name}}">{{client.company.name}}</a></td> <td>{{client.designation}}</td> <td>{{client.name}}</td> </tr> </tbody> </table> ` js code is:
'use strict'; var app = angular.module('clientapp', ['ngresource', 'app.filters']); app.controller('clientctrl', ['$scope', function ($scope) { $scope.selectedcompany = []; $scope.companylist = [{ name: 'a' }, { name: 'b' }, { name: 'c' }]; $scope.clients = [{ name: 'gray', designation: 'manager', company: { name: 'a' } }, { name: 'white', designation: 'm', company: { name: 'a' } },{ name: 'white', designation: 'm', company: { name: 'b' } },{ name: 'white', designation: 'senior', company: { name: 'b' } },{ name: 'white', designation: 'junior', company: { name: 'c' } }, { name: 'white', designation: 'm', company: { name: 'a' } },]; $scope.setselectedclient = function () { var name = this.company.name; if (_.contains($scope.selectedcompany, name)) { $scope.selectedcompany = _.without($scope.selectedcompany, name); } else { $scope.selectedcompany.push(name); } return false; }; $scope.ischecked = function (name) { if (_.contains($scope.selectedcompany, name)) { return 'icon-ok pull-right'; } return false; }; $scope.checkall = function () { $scope.selectedcompany = _.pluck($scope.companylist, 'name'); }; }]);
angular.module('app.filters', []).filter('companyfilter', [function () { return function (clients, selectedcompany) { if (!angular.isundefined(clients) && !angular.isundefined(selectedcompany) && selectedcompany.length > 0) { var tempclients = []; angular.foreach(selectedcompany, function (name) { angular.foreach(clients, function (client) { if (angular.equals(client.company.name, name)) { tempclients.push(client); } }); }); return tempclients; } else { return clients; } }; }]); my query string not #/client/company?name=a,b,c, string "/clients/company.name=a" the table shows results containing company , company should marked in dropdown menu.
you can use $location service. 1 possible solution add in controller:
$scope.location = $location; $scope.$watch('location', function() { if($location.search().name) { $scope.selectedcompany = $location.search().name.split(','); } }); assuming query string is: #/client/company?name=a,b,c
Comments
Post a Comment