Sorting columns in nested ng-repeat (AngularJS)

Question

Currently I don't have any possibility to sort the columns of my list by using the orderBy-filter. The problem what I have is a nested ngRepeat.

View:

<md-list>
        <md-list-item>
            <span ng-repeat="item in ::hItems track by $index" ng-click="sortBy(item)" flex>
                {{ ::item }}
            </span>
        </md-list-item>
        <md-divider></md-divider>
        <md-list-item ng-repeat="cItem in ::cItems | orderBy:sortType:sortReverse track by $index">
            <span ng-repeat="(key, value) in ::cItem track by $index" flex>
                {{ ::value }}
            </span>
            <md-divider></md-divider>
        </md-list-item>
</md-list>

As soon as the user click on a column header the function sortBy will be invoked. The function is implemented in the controller as follows:

//Default values:
$scope.sortType = 'NAME';
$scope.sortReverse = false;
var orderBy = $filter('orderBy');

//sortBy func:
function sortBy(columnKey) {
    $scope.sortType = columnKey;
    $scope.sortReverse = !$scope.sortReverse;
    $scope.cItems = orderBy($scope.cItems, $scope.sortType, $scope.sortReverse);
}

The list sorts just by the default value name. Here is the array output of GET-request:

//JSON data
[
    {
        "ArtNo": "DE123",
        "SHORTCODE": "ABC",
        "NAME": "article one",
        "QUANTITY": 3,
        "GROUPID": 1,
        "ACTIVE": 1
    },...
]

So, I need nested ngRepeat because how you can see the array is defined with key numbers and object values => [0:Object, 1:Object...]. I need just a solution for my sortBy-function. Have anyone an idea?

The following is my output list:

ArtNo | SHORTCODE | NAME          | QUANTITY
DE123 |   ABC001  | article one   | 3
DE456 |   ABC002  | article two   | 8
DE789 |   ABC003  | article three | 4
DE321 |   ABC004  | article four  | 13
....

Please simplify your question code and provide a working fiddle... — Elias Soares
– Elias Soares, Commented Nov 22, 2016 at 23:18
@EliasSoares What don't you understand in my code? Then I can edit my thread. — yuro
– yuro, Commented Nov 22, 2016 at 23:19
What is md-list, md-list-item, md-divider? I know that this may not have influence in the problem, but when you provide the smallest code that the problem occurs, it's easy for you (and us) to find the problem. — Elias Soares
– Elias Soares, Commented Nov 22, 2016 at 23:23
@EliasSoares ouh ok. That are directives of Angular Material. — yuro
– yuro, Commented Nov 22, 2016 at 23:24

Elias Soares · Accepted Answer · 2016-11-23 00:03:45Z

1

If I understood right, you want this behavior:

User click on desired column to sort, and the table content will be ordered by that column.
User click again and the sort direction inverts.

Right?

So why are you ordering twice your array?

//Default values:
$scope.sortType = 'NAME';
$scope.sortReverse = false;
var orderBy = $filter('orderBy');

//sortBy func:
function sortBy(columnKey) {
    $scope.sortType = columnKey;
    $scope.sortReverse = !$scope.sortReverse;
    // You do not need to order anything here. Just define your orderby parameters here to be used on view.
}

Real solution

As talk with question author, we did found the main problem here:

The use of :: syntax on ng-repeat avoids angular from watching changes on OrderBy filter, so the change did not reflect on view.

edited Nov 23, 2016 at 0:03

answered Nov 22, 2016 at 23:31

Elias Soares

10.3k4 gold badges36 silver badges62 bronze badges

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

Collectives™ on Stack Overflow

Sorting columns in nested ng-repeat (AngularJS)

1 Answer 1

Real solution

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Real solution

Comments

Your Answer

Sign up or log in

Post as a guest

Related