角落中的自定义过滤器抛出控制台错误

Angular入门。有疑问。在这段代码中。角落中的自定义过滤器抛出控制台错误

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body> 

<div ng-app="myApp" ng-controller="namesCtrl"> 

<p>Looping with objects:</p> 
<ul> 
    <li ng-repeat="x in names | orderBy: totalMoney"> 
    {{ x.name + ', ' + x.country +', '}} {{x.salary | currency}} {{', '}} {{x.salary + x.bonus | currency}} 
    </li> 
</ul> 

</div> 

<script> 
angular.module('myApp', []).controller('namesCtrl', function($scope) { 
    $scope.names = [ 
     {name:'Jani',country:'Norway',salary:8500,bonus:350}, 
     {name:'Carl',country:'Sweden',salary:5500,bonus:250}, 
     {name:'Margareth',country:'England',salary:7250,bonus:750}, 
     {name:'Hege',country:'Norway',salary:4750,bonus:220}, 
     {name:'Joe',country:'Denmark',salary:5950,bonus:250}, 
     {name:'Gustav',country:'Sweden',salary:11050,bonus:550}, 
     {name:'Birgit',country:'Denmark',salary:6700,bonus:300}, 
     {name:'Mary',country:'England',salary:3500,bonus:150}, 
     {name:'Kai',country:'Norway',salary:9750,bonus:400} 
     ]; 

}) 
.filter('totalMoney',function(){ 
    return function(user) { 
     return user.salary + user.bonus; 
    } 
}); 


</script> 

</body> 
</html>

the totalMoney filter does not work as expected and throws errors in console。

但下面的代码有效。

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body> 

<div ng-app="myApp" ng-controller="namesCtrl"> 

<p>Looping with objects:</p> 
<ul> 
    <li ng-repeat="x in names | orderBy: totalMoney"> 
    {{ x.name + ', ' + x.country +', '}} {{x.salary | currency}} {{', '}} {{x.salary + x.bonus | currency}} 
    </li> 
</ul> 

</div> 

<script> 
angular.module('myApp', []).controller('namesCtrl', function($scope) { 
    $scope.names = [ 
     {name:'Jani',country:'Norway',salary:8500,bonus:350}, 
     {name:'Carl',country:'Sweden',salary:5500,bonus:250}, 
     {name:'Margareth',country:'England',salary:7250,bonus:750}, 
     {name:'Hege',country:'Norway',salary:4750,bonus:220}, 
     {name:'Joe',country:'Denmark',salary:5950,bonus:250}, 
     {name:'Gustav',country:'Sweden',salary:11050,bonus:550}, 
     {name:'Birgit',country:'Denmark',salary:6700,bonus:300}, 
     {name:'Mary',country:'England',salary:3500,bonus:150}, 
     {name:'Kai',country:'Norway',salary:9750,bonus:400} 
     ]; 
    $scope.totalMoney = function(user) { 
     return user.salary + user.bonus; 
    } 
}); 


</script> 

</body> 
</html>

但创建自定义过滤器时不是first approach期望的吗？

那为什么它不工作？如何使它工作？

来源

2016-11-30 Raul Agarwal

你并不需要一个过滤器。您只是订购了价值 – Weedoze

您收到了什么错误？ –

其实orderBy过滤器不仅可以作为参数，而且可以作为一个函数。所以当你作为函数声明它的作品。但是当你创建自定义过滤器时，你实际上是在创建一个自定义的orderBy过滤器，而不能将它分配给orderBy。您使用orderBy而不是将自定义过滤器传递给现有过滤器 –

你不能自定义过滤器分配给一个过滤器像

<li ng-repeat="x in names | orderBy: orderByValue">

orderBy只能采取刺痛和功能参数没有其他自定义过滤器。要么你可以创建一个函数并传递到orderBy，就像你在你的工作例子中那样。或者你可以使用自定义过滤器，如下所示。

这将是你的自定义过滤器：

myApp.filter('orderByValue', function() { 
    // custom value function for sorting 
    function myValueFunction(card) { 
    return user.salary + user.bonus; 
    }

这将是你的HTML：

<ul> 
    <li ng-repeat="x in names | orderByValue"> 
    {{ x.name + ', ' + x.country +', '}} {{x.salary | currency}} {{', '}} {{x.salary + x.bonus | currency}} 
    </li> 
</ul>

来源

2016-11-30 11:25:50

排序依据不允许对象。所以你必须创建自定义过滤器。

查看代码：
<ul> <li ng-repeat="x in names | orderObjectBy"> {{ x.name + ', ' + x.country +', '}} {{x.salary | currency}} {{','}} {{x.salary + x.bonus | currency}} </li> </ul>

JS代码：

angular.module('myApp', []).controller('namesCtrl', function($scope) { 
    $scope.names = [ 
     {name:'Jani',country:'Norway',salary:8500,bonus:350}, 
     {name:'Carl',country:'Sweden',salary:5500,bonus:250}, 
     {name:'Margareth',country:'England',salary:7250,bonus:750}, 
     {name:'Hege',country:'Norway',salary:4750,bonus:220}, 
     {name:'Joe',country:'Denmark',salary:5950,bonus:250}, 
     {name:'Gustav',country:'Sweden',salary:11050,bonus:550}, 
     {name:'Birgit',country:'Denmark',salary:6700,bonus:300}, 
     {name:'Mary',country:'England',salary:3500,bonus:150}, 
     {name:'Kai',country:'Norway',salary:9750,bonus:400} 
     ]; 

}) 
.filter('orderObjectBy', function() { 
return function(items, field, reverse) { 
    var filtered = []; 
    angular.forEach(items, function(item) { 
     filtered.push(item); 
    }); 

    filtered.sort(function (a, b) { 
     return (a['salary']+a['bonus'] > b['salary']+b['bonus'] ? 1 : -1); 
    }); 
    if(reverse) filtered.reverse(); 
    return filtered; 
}; 
});

来源

2016-11-30 13:02:50

角落中的自定义过滤器抛出控制台错误

回答

相关问题