Search code examples
angularjsng-classngtable

ngTable updates ngClass result in error


I'm using esvit' ngTable. to display a big collectiong of data.

But when I try to add a ng-class(fn). First rendering it works (displays info class), but when I manipulate the data (as when i change the attribute winner on user (from the ng-click="(toggleWinner(user))"), it throws an error instead of updating the class.

ngTable:

<div ng-show="(answers).length > 0">
    <table  ng-table="tableParams" template-pagination="custom/pager" class="table table-striped table-bordered table-hover" style="margin-top: 12px;">
        <tr style="cursor:pointer;" ng-click="toggleWinner(user);" ng-repeat="user in $data" ng-class="getClass(user)"> 
            <td data-title="'Bruger'" sortable="'name'">{{user.name}}</td>
            <td data-title="'Email'"  sortable="'email'">{{user.email}}</td>
            <td data-title="'Firma'"  sortable="'company'">{{user.company}}</td>
            <td data-title="'Mobil'"  sortable="'mobile'">{{user.mobile}}</td>
            <td data-title="'Vundet dato'" >{{getPreviousWinnings(user.email)}}</td>
            <td data-title="'Udvælg Vinder'" >
                <span ng-show="user.winner == true" class="glyphicon glyphicon-ok" style="color:darkgreen"></span>
            </td>
        </tr>
    </table>
</div>

getClass(user):

 $scope.getClass = function(user) {
        if (user.winner) {
            return "success";
        } else if ($scope.getPreviousWinnings(user.email).length > 0) {
            return "info";
        } else {
            return "";
        }
    };

I hope you can help, and thanks for taking a look

Error description:

TypeError: undefined is not a function
    at Object.k [as fn] (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:136:370)
    at h.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:106:311)
    at h.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:109:287)
    at HTMLTableRowElement.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:189:372)
    at HTMLTableRowElement.m.event.dispatch (local/js/libs/jquery-1.11.1.min.js:3:8436)
    at HTMLTableRowElement.r.handle (local/js/libs/jquery-1.11.1.min.js:3:5146) 

Solution

  • Most important thing first (solution):

    Check your versions of libs to make sure they are the same

    I was using angularjs 1.2.16 and angular-animate 1.2.10. This resulted in angularjs calling it's own (it thought) $animate.setClass().

    But in angular-animate 1.2.10 it is not there, and since I import the animate, it overwrites the $animate then there was no method to be called. Hard to see when using minified versions.

    Anyways, thanks Kostia for making me make plunker so I could see it functioning.