Question

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不是所需的过滤器吗？

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

Answer 1

您无法将自定义过滤器分配给过滤器，例如

＆＃xA;＆＃xA;

 ＆lt; li ng-repeat =“x in names | orderBy：orderByValue”＆gt;＆＃ xA;

＆＃xA;＆＃xA;

orderBy 只能将sting和function作为参数而不是其他自定义过滤器。您可以创建一个函数并传递给 orderBy ，就像在您的工作示例中所做的那样。或者您可以使用自定义过滤器，如下所示。

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

  myApp.filter（'orderByValue'，function（ ）{＆＃xA; //自定义值函数用于排序＆＃xA;函数myValueFunction（card）{＆＃xA; return user.salary + user.bonus;＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

这将是您的HTML：

＆＃xA;＆＃xA;

 ＆lt; ul＆gt;＆＃xA;＆lt; li ng- repeat =“x in names | orderByValue”＆gt;＆＃xA; {{x.name +'，'+ x.country +'，'}} {{x.salary | currency}} {{'，'}} {{x.salary + x.bonus | currency}}＆＃xA;＆lt; / li＆gt;＆＃xA;＆lt; / ul＆gt;＆＃xA;

＆＃xA;

Answer 2

OrderBy不允许使用对象。所以你必须创建自定义过滤器。

查看代码：
<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;
};
});

Angular中的自定义过滤器会引发控制台错误

2 个答案: