コンソールのエラーで角度スローのカスタムフィルター

角度を使用して開始する。疑いがあった。このコードでは、コンソールのエラーで角度スローのカスタムフィルター

<!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

コンソールのエラーで角度スローのカスタムフィルター

答えて

関連する問題