AngularJS OrderBy自定义函数

我是AngularJS的新手，但到目前为止，我已经能够把所有东西都包裹起来。但OrderBy正在引起我的问题。而且我还没有发现像我这样的问题。我有一种感觉，那是因为我错过了$范围以及orderBy的实际工作方式。AngularJS OrderBy自定义函数

我正在创建一个列表，该列表将显示今年NaNoWriMo在我所在地区的作家。我已将用户分为工厂，并将其显示出来。但是，我有问题让他们排序。名称和Wordcount排序没有问题。但是“计算平均字数”根本没有排序。它甚至不会调用我为它制作的功能。

这是我的简化布局，以及JSFiddle setup (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>

来源

2014-10-16 B Ronk

当你点击的平均WPD标题，您可以设置$ scope.sort到串 “avgWords”。因此，orderBy使用此字符串对用户进行排序，从而通过avgWords字段的值（通常为undefined）对用户进行排序。

如果你想使用自定义函数，而不是一个字段进行排序，则必须设置$scope.sort到要排序的功能：

$scope.sort = $scope.avgWords;

要做到这一点，则在标题NG单击应是

sortChange(avgWords)

来源

2014-10-16 16:55:52

啊，我错过了。这应该是这样设置的。 [这是更新的小提琴]（http://jsfiddle.net/btronk/6dma7yhc/1/）。但问题仍然是一样的。我将点击设置为sortChange（'sorgAvg'）以与该函数相对应，但它从来没有被调用过。 – 2014-10-16 16:59:06

现在我明白我在做什么。你是对的。问题在于调用sortChange（'avgWords'）和sortChange（avgWords）之间的区别。一个寻找属性，另一个寻找一个功能。这一次，这是由两个''造成的！谢谢。 – 2014-10-16 17:15:52

为了确实准确，其他人并没有专门针对某个功能。无论类型是什么，它都会查找名为avgWords的当前作用域的属性。 – 2014-10-16 19:08:43

您可以随时将平均单词属性添加到范围上的用户数组中的对象。这样，每列可通过相应的属性进行过滤...所以像

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); 
    }

来源

2014-10-16 17:02:29 prawn

我有同样的想法，但问题在于用户可以动态添加。它不会更新新用户，只会在初始加载时更新用户。 – 2014-10-16 17:11:44

这样做更有意义。 avgWords自然应该是“用户”的属性。看看这个[小提琴]（http://jsfiddle.net/6dma7yhc/2/）。所以在您的Xhr请求之后立即添加它们。 – shxfee 2014-10-16 17:22:59

AngularJS OrderBy自定义函数

回答

相关问题