Question

假设我有一个角度过滤器translate可以对字符串执行操作 - 无关紧要 - 以及按字母顺序排序内容的过滤器sort（如orderBy : 'toString()'）。

我现在想从字符串的数组str打印出字符串，但是根据它们的翻译排序。也就是说，我想让以下html代码工作：

<div ng-repeat="s in strs | translate | sort">{{ s }}</div>

它不起作用 - 我认为是因为translate是一个作用于字符串的过滤器，有点像签名 String→String 。但我需要它来对字符串数组采取行动，对吗？有点像签名 [String]→[String] ，对吧？如果这是真的，我需要找到一种方法，在该角度表达式中映射translate数组，例如strs。

我怎么能以棱角分明的方式做到这一点或实现我想要的优雅呢？

实施例。说translate分别将字符串'a'，'b'，'c'发送到'z'，'y'，'x'。然后我想要上面的角度增强的html元素产生一个等效的html输出：

<div>c</div> <div>b</div> <div>a</div>

Answer 1

如果您的翻译库不支持在阵列上进行翻译，我会为此向您的项目添加一个新的过滤器：

＆＃13;

angular.module("mymodule", ["pascalprecht.translate"]);
angular.module("mymodule").config(function($translateProvider) {
  // Set up message keys
  $translateProvider.translations('en', {
    A: 'Apple',
    B: 'Banana'
  })
}).run(function($translate) {
  // Select language
  $translate.use("en");
})
/**
 * @filter translateArray
 * @description Convert an array of message IDs 
 * to an array of translations using the `$translate` service
 * @param {Array<String>} translationIDs - An array of message keys
 * @returns {Array<String>} - An array of translated strings.
 */
.filter("translateArray", function($translate) {
  return function(translationIDs) {
    return translationIDs.map(function(id) {
      return $translate.instant(id);
    })
  };
}).controller("demoController", function($scope) {
  // Template will translate then sort. Should give:
  // Apple, Banana
  $scope.strs = ["B", "A"];
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.10.0/angular-translate.min.js"></script>

<body ng-app="mymodule">
  <div ng-controller="demoController">
    <div ng-repeat="s in (strs | translateArray | orderBy:'toString()')">{{s}}</div>
  </div>
</body>

＆＃13;

Angularjs：在数组上映射角度过滤器

1 个答案: