gpt4 book ai didi

javascript - 具有自定义功能的 AngularJS OrderBy

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:00:43 26 4
gpt4 key购买 nike

我是 AngularJS 的新手,但到目前为止,我已经能够掌握所有内容。但是 OrderBy 给我带来了问题。而且我还没有发现任何像我这样的问题。我有一种感觉,这是因为我遗漏了一些有关 $scope 以及 orderBy 实际工作方式的信息。

我正在创建一个列表,显示我所在地区今年 NaNoWriMo 的作家。我已将用户分离为工厂,并将它们显示出来。但是,我在整理它们时遇到了问题。名称和字数排序没有问题。但是计算平均字数根本没有排序。它甚至不会调用我为它创建的函数。

这是我的简化布局,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>

最佳答案

您始终可以将平均字属性添加到作用域上用户数组中的对象。这样每一列都可以通过适当的属性进行过滤......所以像

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

关于javascript - 具有自定义功能的 AngularJS OrderBy,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26409708/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com