Angularjsのリストで複数のフィルタを追加しようとしていません

Question

リストに大文字と小文字の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> 

大文字と小文字の両方のフィルタがある場合、リストには入力されません。あなたがつもり箱から出して何よりも複雑な何かをやっている場合は、代わりにカスタムフィルタを作成する必要があります

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

Answer 2

てみてくださいこれは：

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>