添加多个过滤器不适用于Angularjs中的列表

时间:2016-05-02 15:03:05

标签: angularjs

我为列表添加了大写和小写等2个过滤器,数据未显示。如果仅应用小写或大写数据正在显示。 请检查下面的代码,请告诉我问题在哪里。

<div ng-app="myApp1" ng-controller="ctrl1">

        <ul >
            <li ng-repeat="x in names | orderBy:'name'">
                {{x.name  | lowercase   +' , '+x.country  | uppercase }}
            </li>
        </ul>
    </div>

    <script>
           var app1= angular.module("myApp1",[]);
            app1.controller("ctrl1", function($scope){

                $scope.names=[{name:"ravi", country:"india"},{name:"kavitha",country:"india"},
                    {name:"Jo", country:"UK"},{name:"Hasi", country:"USA"},
                    {name:"Raj", country:"London"},{name:"Kal", country:"USA"}];

            });

        </script>

如果同时包含大写和小写过滤器,则此列表不会填充。

2 个答案:

答案 0 :(得分:1)

你应该写一个自定义过滤器,如果你要做的事情比开箱即用更复杂......

angular.module("MyApp", []).filter("myFilterName", function() {
    return function(input) {
        if(!input) return "";
        else
            return input.name.toLower() + input.country.toUpper();
    }
});

<强> HTML:

<div ng-repeat="thing in things">
    {{ thing | myFilterName }}
</div>

答案 1 :(得分:0)

试试这个:

angular.module('YourModule').filter('personLocationDisplay', function() {
   return function(person) {
      return (person.name.toLowerCase() + ', ' + person.country).toUpperCase();
   };
});

您可以像以下一样使用它:

<ul>
   <li ng-repeat="x in names | orderBy:'name'">
      {{x | personLocationDisplay }}
   </li>
</ul>