Geek Answers Handbook

AngularJS OrderBy with custom function

I am new to AngularJS, but so far I have managed to get around everything. But OrderBy is causing me problems. And I have not found such problems as mine. I have this feeling because I'm missing something in the $ scope area and how OrderBy works.

I am creating a list that will show authors in my region over the years NaNoWriMo. I divided the users as "Factories" and got them. But I have problems sorting them. Sorting Name and Wordcount without problems. But Calculated Average Wordcount is not sorted at all. It will not call the function that I did for it, even.

Here's my simplified layout and JSFiddle Customization (updated) .

JS:

(function () {
var app = angular.module('userList', []);

app.controller('ListController', ['$scope',

function ($scope) {
    $scope.users = userData;
    $scope.day = 30;

    $scope.avgWords = function (user) {
        return Math.floor(user.wordcount / $scope.day);
    };

    $scope.sort = "name";
    $scope.sortRev = false;

    $scope.sortChange = function (field) {
        if ($scope.sort === field) {
            $scope.sortRev = !$scope.sortRev;
            return;
        }

        $scope.sort = field;
        $scope.sortRev = false;
    };

    $scope.sortAvg = function (user) {
        alert("sorted!");
        return Math.floor(user.wordcount / $scope.day);
    };
}]);

var userData = [{
    "name": "Kris",
        "wordcount": 42382
}, {
    "name": "Tim",
        "wordcount": 60120
}, {
    "name": "Elsa",
        "wordcount": 150675
}];
})();

HTML:

<div ng-controller="ListController">
<table>
    <thead>
        <tr>
            <th ng-click="sortChange('name');">Username</th>
            <th ng-click="sortChange('wordcount');">Total Words</th>
            <th ng-click="sortChange('sortAvg');">Average WPD</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="user in users | orderBy:sort:sortRev">
            <td>{{user.name}}</td>
            <td>{{user.wordcount}}</td>
            <td>{{avgWords(user)}}</td>
        </tr>
    </tbody>
</table>

+4
2

Average WPD, $scope.sort "avgWords". , orderBy , , avgWords, undefined.

, , , $scope.sort , , :

$scope.sort = $scope.avgWords;

, ng-click

sortChange(avgWords)
+1

. , ... -

http://jsfiddle.net/poppypoop/swer05sx/

    $scope.users = userData;
    $scope.day = 30;

      for(var i=0; i < $scope.users.length; i++){
        $scope.users[i].avgWords = Math.floor($scope.users[i].wordcount / $scope.day);
    }
+2

More articles:


All Articles