current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I have a list of object like this :

var entryList = [
  {
    "Key1": "Value1",
    "Key2": "Value2",
    "Key3": "Value3"
  },
  {
    "Key1": "Value1",
    "Key2": "Value2",
    "Key3": "Value3"
  },
  {
    "Key1": "Value1",
    "Key2": "Value2",
    "Key3": "Value3"
  }
]

And I want to create a HTML tab like this :

+--------+--------+--------+
|  Key1  |  Key2  |  Key3  |
+--------+--------+--------+
| Value1 | Value2 | Value3 |
| Value4 | Value5 | Value6 |
| Value7 | Value8 | Value9 |
+--------+--------+--------+

And sort the values by key when we click on the header

3/4 of the code is in the html

<table class="table table-bordered table-striped">

<thead>
        <tr>
            <td ng-repeat="(key, value) in $ctrl.entryList[0]">
                <a ng-click="$ctrl.sortType = key; $ctrl.sortReverse = !$ctrl.sortReverse">
                    {{key}}
                    <span ng-show="$ctrl.sortType == key && !$ctrl.sortReverse" class="fa fa-caret-down"></span>
                    <span ng-show="$ctrl.sortType == key && $ctrl.sortReverse" class="fa fa-caret-up"></span>
                </a>
            </td>
        </tr>
    </thead>

    <tbody>
        <tr ng-repeat="itemFormData in $ctrl.entryList | orderBy:sortType:sortReverse | filter:searchForm">
            <td ng-repeat="(key, value) in itemFormData">{{ itemFormData[key] }}</td>
        </tr>
    </tbody>

</table>

The table is correctly displayed but when I click on the header to sort the column nothing happens. If you have some suggestions and thank you for your time.

share|improve this question
    
what if you try to group your data? – federico scamuzzi 21 hours ago
    
Create a fiddle: jsfiddle.net – mikeb 21 hours ago
    
Thank you for your answer :) you can find the jsfiddle here – Augustin Chini 20 hours ago
up vote 0 down vote

Instead of putting code directly in ng-click, make a function in your controller. That's what a controller is for!

<a ng-click="selectSortType(key)">

$scope.selectSortType = function(key) {
  $scope.sortType = key; 
  $scope.sortReverse = !$scope.sortReverse;
};

https://jsfiddle.net/cfhzub2y/1/

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.