CODEWITHSUNDEEP
javascriptjqueryangularjsangularjs-directiveangularjs-scope
jhorton
jhorton

Reputation: 1059

HTML not updating after successful use of $filter(orderBy) in custom directive

I'm creating a custom directive called ngSortable that can use the orderBy filter on an array when the element is clicked. I've stepped through and confirmed the array is being sorted correctly, but the view is not updating. The filter is wrapped in scope.$apply(), so I'm not sure why it doesn't update. I've also put a scope.$watch on the array to see if the change was being broadcast and the $watch doesn't catch anything. I'm using jquery click event listener if that makes any difference. If anyone can help me figure out what I'm doing wrong here I would greatly appreciate it.

HTML 

<table class="table table-bordered table-condensed">
<thead>
    <tr>
        <th ng-sortable="policyAcordTypes" enable-multiple="true" data-field="description" style="width: 40%;">Acord Type</th>
        .....
    </tr>
</thead>
<tbody>
    <tr ng-repeat="item in policyAcordTypes" >
        <td style="width: 40%; min-width: 140px">
            <div>{{item.description}}</div>
        </td>
        ....
    </tr>
</tbody>

Javascript

scope.$apply(function () {
    $filter('orderBy')(scope.$eval(attr.ngSortable), 'description');  
});

And I've tried this...
Javascript

scope.$apply(function () {
    var list = scope.$eval(attr.ngSortable);
    list = $filter('orderBy')(scope.$eval(attr.ngSortable), 'description');  
});

Upvotes: 0

Views: 257

Answers (1)

Khanh TO
Khanh TO

Reputation: 48972

$filter('orderBy') does not modify the passed in array, it returns a new ordered array. You need to assign the returned array back to the scope's property.

Instead of using scope.$eval(attr.ngSortable), you should use [] operator (standard javascript)

Try:

scope.$apply(function () {
    scope[attr.ngSortable] = $filter('orderBy')(scope[attr.ngSortable], 'description');  
});

DEMO (clicking on the header will sort the row)

Upvotes: 1

Related Questions