如何在AngularJS单个表达式中添加多个过滤器？

嗨，作为AngularJS新手，你遇到的这个问题其实很常见！你想实现的是分别对name应用大写过滤器、对country应用小写过滤器，再把两者拼接起来显示，对吧？

你之前尝试的{{ name | uppercase + ", " + country | lowercase }}写法是不对的，因为AngularJS的表达式解析顺序会出问题——它会先把uppercase + ", " + country当成一个整体去处理，而不是分别给每个变量应用过滤器。

正确的写法 #

你需要给每个变量单独应用过滤器，并用括号明确优先级，再进行字符串拼接：

{{ (name | uppercase) + ", " + (country | lowercase) }}

这里的括号确保了过滤器先作用于对应的变量，之后再把处理后的结果和字符串, 拼接在一起。

另外注意你原代码里的拼写错误：$scope.coutry应该改成$scope.country，不然变量无法正确识别。

修正后的完整代码 #

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> 
<body> 
  <div ng-app="myApp" ng-controller="personCtrl"> 
    <p>The name and country are {{ (name | uppercase) + ", " + (country | lowercase) }}</p> 
  </div> 

  <script> 
    angular.module('myApp', []).controller('personCtrl', function($scope) { 
      $scope.name = "John";
      $scope.country = "US"; // 修正了拼写错误
    }); 
  </script> 
</body> 
</html>

运行这段代码后，你会看到输出：The name and country are JOHN, us，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Ajit A Ankalle