角落中的自定義過濾器拋出控制檯錯誤

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

角落中的自定義過濾器拋出控制檯錯誤

回答

相關問題