angularJS: sorting table with ngTable not working

Question

I tried to look around and I found more questions that look the same to this one but no one done it the way I do it, for some reason it doesn't work...

here is the angular code,

var myAPP = angular.module('myAPP', ['ngTable']);
myAPP.run(function($rootScope, $http, $moment) {

    $rootScope.items = [];
    $rootScope.currentEvent = "";

    // inital stats - items
    $http.get("/wp-content/themes/theme/myjson.php", {
        params: {
            getAll: true,
            watcherID: <?=get_current_user_id()?>
        }
    }).then(function(reponse) {
        $rootScope.items = reponse.data;
    });


    $rootScope.update = function(inital) {

        $rootScope.items = [];

        $http.get("/wp-content/themes/theme/myjson.php", {
            params: {
                sort: true,
                watcherID: <?=get_current_user_id()?>,
                event: $rootScope.currentEvent
            }
        }).then(function(response) {
            $rootScope.items = response.data;
            console.log("data", $rootScope.currentEvent, $rootScope.items);

        });

    } // end update

    $rootScope.$watch('items', function(newValue, oldValue) {
        if(!newValue) return;
        if(newValue != oldValue) {
            $rootScope.items = newValue;
            console.log('new value $rootScope.items', $rootScope.items);
        }
    });


});

myAPP.controller('tbleCtrl', function($scope, $rootScope, $http, ngTableParams) {
    $scope.data = $rootScope.items;
    $rootScope.$watch('items', function(newValue, oldValue) {
        if(!newValue) return;
        if(newValue != oldValue) {
            $scope.data = $rootScope.items;
        }
    });
});

first I tried to use the rootScope to handle stuff but after that I tried also to put it in a scope (I thought it i'd make the difference to put the values on var named data as all the examples) but I had no luck wit that also.

and this is my controller

<div ng-controller="tbleCtrl">
  <table ng-table show-filter="true" class="floodPostTable">
    <tr>
        <th sortable="number">number</th>
        <th sortable="roadNumber">Road number<br /></th>
    </tr>
    <tr ng-repeat="item in data">
        <td><div ng-show="item.number != false">{{ item.number }}</div></td>
        <td><div ng-show="item.roadNumber != false">{{ item.roadNumber }}</div></td>
    </tr>
  </table>
</div>

if anyone can direct me what I am missing or what I'm doing wrong I'd be very thankful for it!

PS: the table is shown and its working fine with the implement the repeat but only the sorting doesn't work for some reason.

SirDemon · Accepted Answer · 2015-04-27 16:19:25Z

3

You are not setting correct values on your sortable attribute.

The attribute expects a model that represents a string.

Try:

    <div ng-controller="tbleCtrl">
  <table ng-table show-filter="true" class="floodPostTable">    
    <tr ng-repeat="item in data">
        <td sortable="'number'" data-title="'Number'"><div ng-show="item.number != false">{{ item.number }}</div></td>
        <td sortable="'roadNumber'" data-title="'Road Number'"><div ng-show="item.roadNumber != false">{{ item.roadNumber }}</div></td>
    </tr>
  </table>
</div>

You'll notice I removed your th elements, ng-table will create them for you.

You're also missing the use of an actual ngTableParams instance and the setting of it as the value on ng-table attribute. Not sure how you intend to actually show any rows without doing what ngTable pretty much requires you to do.

Try a look here: http://bazalt-cms.com/ng-table/example/1

edited Apr 27, 2015 at 16:19

answered Apr 27, 2015 at 11:15

SirDemon

1,75815 silver badges24 bronze badges

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

3 Comments

greW Over a year ago

you noticed that the item obj is defined after the <th> ? so how can I do it ?

greW Over a year ago

thanks @SirDemon, i've tried this one already .. (I didnt have much luck) as the table doesn't get sorted (on click) just the arrows near the title changes ... but anyway an answer with keeping the <th> will be better as it part of my table design .. (css)ed

Boris Over a year ago

Passing to sortable as a string is surprisingly easy to miss, I spent quite a while looking at more complex solutions and this answer made me spot I was missing the single quotes...

Community · Accepted Answer · 2017-05-23 11:58:08Z

2

Angular ng-table dynamic headers doesn't work inside

as the answer there says "Define a template for a header, and set a template-header attribute of ng-table."

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Apr 28, 2015 at 6:34

Danny

8812 gold badges10 silver badges20 bronze badges

Comments

Himanshu Bhandari · Accepted Answer · 2015-04-28 06:37:12Z

1

Instead of <tr ng-repeat="item in data">

try

<tr ng-repeat="item in $data">

answered Apr 28, 2015 at 6:37

Himanshu Bhandari

1,8892 gold badges25 silver badges38 bronze badges

Collectives™ on Stack Overflow

angularJS: sorting table with ngTable not working

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related