Filtering table using URL parameters

Question

Can somebody correct me on how these codes will work-in know these is not a working code’s am having trouble on how to pass the URL parameters name and start date. I want to filter the name peter and the start date on the filter by passing the URL parameter of the name. The table is working but if I will apply the code for setting the URL the code will not worked. Nothings happen. Can anybody help 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>

changtung · Accepted Answer · 2015-08-03 08:25:50Z

1

I suppose you want to send name and date in query params in HTTP GET request? Then send it like 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, you specify url parameters, called query String parameters.

You have to set with ng-model a variable where you should store your query param. I will show you a howto for name: in a view which uses tableCtrl:

<input type="text" ng-model="params.name" placeholder="Tell me name"/>

In a 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, will observe changes in params.name model, so if it changes, the api would call and data would be refreshed. Then because of two way data binding, Angular would automatically update variables. Now it would change letter after letter during typing. You can then change it to event when input looses focus or after some delay in typing letters. It's up to You.

edited Aug 3, 2015 at 8:25

answered Aug 3, 2015 at 8:11

changtung

1,6242 gold badges15 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Flizz Over a year ago

nope sir. i want to get the URL parameters like "staging.api.sample.com/events.json?name=peter .

Flizz Over a year ago

these is my nightmare 1 week up to now. i want to make a filter like if you type "peter" the parameters will pass through the URL "staging.api.sample.com/events.json?name=peter" and it will show all names on my table that has "Peter". help me sir.

Flizz Over a year ago

i tried ya code sir. but the table came crash. youre code is so interesting but i dunno why it went crash . the event.json didnt bind through the table sir. how was that?

Flizz Over a year ago

nothing happen sir. do we have an editor in here?to view the output? i am new in stack overflow sir , and really need to work this code. @cyan. .

Flizz Over a year ago

like for example sir. in my search button i am going to type the name peter. and if i click the button on the search. the output will bring me to the link "Http://staging.sample.com/events.json?name=peter " . hope you have more suggestion about this code sir.

|

Collectives™ on Stack Overflow

Filtering table using URL parameters

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related