jquery - Filtering table using URL parameters -
can correct me on how these codes work-in know these not working code’s having trouble on how pass url parameters name , start date. want filter name peter , start date on filter passing url parameter of name. table working if apply code setting url code not worked. nothings happen. can me?
<!doctype html> <html ng-app="mytable"> <head> <title>project 43</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script> <script type="text/javascript"> var mytable = angular.module('mytable', []); mytable.controller('tablectrl', function ($scope, $http) { $http.get("http://staging.api.sample.com/events.json", {headers: {authorization: 'vunyhxbpkfh7dxkl40acq1o2jdeivrrdsds'}}) .success(function (response) { debugger $scope.members = response.events; $scope.totals = response.paging; }); }); //url http://staging.api.sample.com/events.json?name=peter&start_date_from=2015-01-01 $location.search(); result: { name : 'peter', start_date_from:'2015-01-01' } </script> </head> <body ng-controller="tablectrl"> <table id="filtertable"border="5"> <tr> <th>event</th> <th>account shop</th> <th>place</th> <th>activity</th> </tr> <tr ng-repeat="member in members"> <td> {{member.event.name}}<br> <!--names--> {{member.event.id}}<br> {{member.event.date_start}}<br> {{member.event.date_end}}<br> <td> {{member.accountshop.id}}<br> {{member.accountshop.name}}<br> {{member.accountshop.short_code}}<br> </td> <td> <div ng-repeat="place in member.place"> {{place.id}}<br> {{place.name}}<br> {{place.lk_country_code}}<br> </div> </td> <td> <div ng-repeat="activity in member.activity"> {{activity.id}}<br> {{activity.short_description}} </div> </td> </table> </body> </html>
i suppose want send name , date in query params in http request? send this: instead of:
$http.get("http://staging.api.sample.com/events.json", {headers: {authorization: 'vunyhxbpkfh7dxkl40acq1o2jdeivrrdsds'}}) use more precise version of call:
$http({ url: "http://staging.api.sample.com/events.json", params : { name : 'peter', start_date_from:'2015-01-01'}, method: "get", headers: {authorization: 'vunyhxbpkfh7dxkl40acq1o2jdeivrrdsds'} }); in params, specify url parameters, called query string parameters.
you have set ng-model variable should store query param. show howto name: in view uses tablectrl:
<input type="text" ng-model="params.name" placeholder="tell me name"/> in controller set watch on name:
mytable.controller('tablectrl', function ($scope, $http) { $scope.$watch('params.name', function(n,o){ if ( n != o ) { $http({ url: "http://staging.api.sample.com/events.json", params : { name : $scope.params.name, start_date_from:'2015-01-01'}, method: "get", headers: {authorization: 'vunyhxbpkfh7dxkl40acq1o2jdeivrrdsds'} }) .success(function (response) { debugger $scope.members = response.events; $scope.totals = response.paging; }); }); }); $watch, observe changes in params.name model, if changes, api call , data refreshed. because of 2 way data binding, angular automatically update variables. change letter after letter during typing. can change event when input looses focus or after delay in typing letters. it's you.
Comments
Post a Comment