Dynamic Angular table not sorting

Question

I'm having some difficulty sorting a dynamic Angular table.

If I hard-code the table headers, it works. Fiddle: https://jsfiddle.net/xgL15jnf/

<thead>
    <tr>
        <td>
            <a href="#" ng-click="sortType =  'id';    sortReverse = !sortReverse">id
                <span   ng-show="sortType  == 'id' && !sortReverse" class="glyphicon glyphicon-arrow-down"></span>
                <span   ng-show="sortType  == 'id' &&  sortReverse" class="glyphicon glyphicon-arrow-up"></span>
            </a>
        </td>
        <td>
            <a href="#" ng-click="sortType =  'name';    sortReverse = !sortReverse">name
                <span   ng-show="sortType  == 'name' && !sortReverse" class="glyphicon glyphicon-arrow-down"></span>
                <span   ng-show="sortType  == 'name' &&  sortReverse" class="glyphicon glyphicon-arrow-up"></span>
            </a>
        </td>
        <td>
            <a href="#" ng-click="sortType =  'cost';    sortReverse = !sortReverse">cost
                <span   ng-show="sortType  == 'cost' && !sortReverse" class="glyphicon glyphicon-arrow-down"></span>
                <span   ng-show="sortType  == 'cost' &&  sortReverse" class="glyphicon glyphicon-arrow-up"></span>
            </a>
        </td>
    </tr>
</thead>

But, if I build the headers dynamically, it does not. Fiddle: https://jsfiddle.net/m31d00sz/

<thead>
    <tr>
        <td ng-repeat="column in cols">
            <a href="#" ng-click="sortType = '{{column}}';    sortReverse = !sortReverse">{{column}}
                <span ng-show="sortType   == '{{column}}' && !sortReverse" class="glyphicon glyphicon-arrow-down"></span>
                <span ng-show="sortType   == '{{column}}' &&  sortReverse" class="glyphicon glyphicon-arrow-up"></span>
            </a>
        </td>
    </tr>
</thead>

The Search/Filter works in both Fiddles.

I'm hoping I'm overlooking something simple, and would appreciate if someone could take a look and provide some guidance!

dfsq · Accepted Answer · 2015-09-17 22:26:38Z

1

You don't need to use interpolation braces {{column}} inside ngClick directive. It should be:

ng-click="sortType = column; sortReverse = !sortReverse"

And there is one more problem. Since ngRepeat directive creates new child scopes per iteration when you click you actually modify local scope sortReverse and sortType properties. The simple fix is to make use of prototypical inheritance, in which case ngClick will use properties from upper scopes resolved by prototypical chain.

For this in controller define

$scope.sort = {
    type: 'id',
    reverse: false
};

and in template:

<td ng-repeat="column in cols"> 
    <a href="#" ng-click="sort.type = column; sort.reverse = !sort.reverse">
        {{column}}
        <span ng-show="sort.type == column && !sort.reverse" class="glyphicon glyphicon-arrow-down"></span>
        <span ng-show="sort.type == column && sort.reverse" class="glyphicon glyphicon-arrow-up"></span>
    </a>

</td>

and

<tr ng-repeat="row in rows | orderBy:sort.type:sort.reverse | filter:searchData">
    <td ng-repeat="column in cols">{{row[column]}}</td>
</tr>

Demo: https://jsfiddle.net/m31d00sz/1/

edited Sep 17, 2015 at 22:26

answered Sep 17, 2015 at 22:12

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

2 Comments

RobertFrenette Over a year ago

Thanks for the reply. I tried changing the ng-click to "sortType = column" as advised above, but that didn't seem to work. I also tried changing the sortType on the ng-show directives as well.

RobertFrenette Over a year ago

Perfect! Thanks for the explanation, and the Fiddle.

Collectives™ on Stack Overflow

Dynamic Angular table not sorting

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related