javascript - how to search using multiple parameters in angular in a single search box? -
i have search field , want apply filter onto , want json data searched multiple parameters , want specify parameters in such way can change them @ time of api calling , here in code name , branch category able search name , not getting clue how fix , kindly help
here code
index.html
<!doctype html> <html lang="en" ng-app="myapp"> <head> <meta charset="utf-8"> <title>dynamic pagination w/ filtering</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content="kim maida"> <!-- js libraries --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js" type="text/javascript"></script> <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js" type="text/javascript"></script> <!-- angular scripts --> <script src="script.js" type="text/javascript"></script> <!-- bootstrap --> <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> </head> <body> <div ng-controller="pagectrl"> <label>search:</label> <input type="text" ng-model="search.name" placeholder="search" /> <br /> <h1>items</h1> <ul> <li ng-repeat="item in filtered = items | filter:search | startfrom:(currentpage-1)*entrylimit | limitto:entrylimit">{{item.name}} {{item.branch}}</li> </ul> <!-- <pagination page="currentpage" max-size="noofpages" total-items="totalitems" items-per-page="entrylimit"></pagination> --> <ul class="pagination"> <li ng-class="disableprevpage()"> <a href ng-click="prevpage()">« prev</a> </li> <li ng-repeat="n in range()" ng-class="{active: n == currentpage}" ng-click="setpage(n)"> <a href="#">{{n+1}}</a> </li> <li ng-class="disablenextpage()"> <a href ng-click="nextpage()">next »</a> </li> </ul> </body> </html> here app.js code
var app = angular.module('myapp', ['ui.bootstrap']); app.filter('startfrom', function () { return function (input, start) { if (input) { start = +start; return input.slice(start); } return []; }; }); app.controller('pagectrl', ['$scope', 'filterfilter', function ($scope, filterfilter) { $scope.items = [{ "name": "name 1", "category": [{ "category": "management" }, { "category": "business" }], "branch": "west" }, { "name": "name 2", "category": [{ "category": "engineering" }], "branch": "west" }, { "name": "name 3", "category": [{ "category": "management" }, { "category": "engineering" }], "branch": "west" }, { "name": "name 4", "category": [{ "category": "management" }, { "category": "business" }], "branch": "west" }, { "name": "name 5", "category": [{ "category": "management" }, { "category": "business" }], "branch": "east" }, { "name": "name 6", "category": [{ "category": "management" }, { "category": "business" }], "branch": "east" }, { "name": "name 7", "category": [{ "category": "management" }, { "category": "business" }], "branch": "east" }, { "name": "name 8", "category": [{ "category": "business" }], "branch": "west" }, { "name": "name 9", "category": [{ "category": "management" }, { "category": "business" }], "branch": "east" }, { "name": "name 10", "category": [{ "category": "management" }], "branch": "east" }, { "name": "name 11", "category": [{ "category": "management" }, { "category": "business" }], "branch": "east" }, { "name": "name 12", "category": [{ "category": "engineering" }], "branch": "west" }, { "name": "name 13", "category": [{ "category": "management" }, { "category": "business" }], "branch": "west" }, { "name": "name 14", "category": [{ "category": "engineering" }], "branch": "east" }, { "name": "name 15", "category": [{ "category": "management" }, { "category": "engineering" }], "branch": "east" }, { "name": "name 16", "category": [{ "category": "management" }], "branch": "west" }, { "name": "name 17", "category": [{ "category": "management" }], "branch": "east" }, { "name": "name 18", "category": [{ "category": "business" }], "branch": "west" }, { "name": "name 19", "category": [{ "category": "business" }], "branch": "west" }, { "name": "name 20", "category": [{ "category": "engineering" }], "branch": "east" }, { "name": "peter", "category": [{ "category": "business" }], "branch": "east" }, { "name": "frank", "category": [{ "category": "management" }], "branch": "east" }, { "name": "joe", "category": [{ "category": "business" }], "branch": "east" }, { "name": "ralph", "category": [{ "category": "management" }, { "category": "business" }], "branch": "east" }, { "name": "gina", "category": [{ "category": "business" }], "branch": "east" }, { "name": "sam", "category": [{ "category": "management" }, { "category": "engineering" }], "branch": "east" }, { "name": "britney", "category": [{ "category": "business" }], "branch": "west" }]; // create empty search model (object) trigger $watch on update $scope.search = {}; $scope.resetfilters = function () { // needs function or won't trigger $watch $scope.search = {}; }; // pagination controls // $scope.currentpage = 1; // $scope.totalitems = $scope.items.length; // $scope.entrylimit = 2; // items per page // $scope.noofpages = math.ceil($scope.totalitems / $scope.entrylimit)-1; $scope.entrylimit = 2; $scope.currentpage = 0; $scope.totalleaditems = $scope.items.length; $scope.range = function() { var rangesize = 3; var ps = []; var start; start = $scope.currentpage; if ( start > $scope.pagecount()-rangesize ) { start = $scope.pagecount()-rangesize+1; } (var i=start; i<start+rangesize; i++) { ps.push(i); } return ps; }; $scope.prevpage = function() { if ($scope.currentpage > 0) { $scope.currentpage--; } }; $scope.disableprevpage = function() { return $scope.currentpage === 0 ? "disabled" : ""; }; $scope.pagecount = function() { return math.ceil($scope.totalitems / $scope.entrylimit)-1; }; $scope.nextpage = function() { if ($scope.currentpage < $scope.pagecount()) { $scope.currentpage++; } }; $scope.disablenextpage = function() { return $scope.currentpage === $scope.pagecount() ? "disabled" : ""; }; $scope.setpage = function(n) { $scope.currentpage = 0; }; // $watch search update pagination $scope.$watch('search', function (newval, oldval) { $scope.filtered = filterfilter($scope.items, newval); $scope.totalitems = $scope.filtered.length; $scope.noofpages = math.ceil($scope.totalitems / $scope.entrylimit); $scope.currentpage = 1; }, true); }]);
you missed model.object:
use filter:search.name:
<li ng-repeat="item in filtered = items | filter:search.name | startfrom:(currentpage-1)*entrylimit | limitto:entrylimit">{{item.name}} {{item.branch}}</li>
Comments
Post a Comment