Angularjs：在数组上映射角度过滤器
[英]Angularjs: Mapping angular filters over arrays
问题描述
Say I have an angular filter translate which does stuff on strings – doesn't matter what – and a filter sort which sorts stuff alphabetically (as in orderBy : 'toString()' ).
假设我有一个 angular 过滤器translate可以在字符串上做一些事情 - 无关紧要 - 以及一个按字母顺序sort的过滤器sort （如orderBy : 'toString()' ）。
I now want to print out strings from an array str of strings, but sorted according to their translation.我现在想从字符串数组str中打印出字符串，但根据它们的翻译进行排序。 That is, I want to make the following html code work:也就是说，我想让以下 html 代码工作：
<div ng-repeat="s in strs | translate | sort">{{ s }}</div>
It doesn't work – I assume it's because translate is a filter acting on strings, sort of like having signature String → String .它不起作用——我认为这是因为translate是一个作用于字符串的过滤器，有点像具有签名String → String 。 But I need it to act on arrays of strings, right?但是我需要它来处理字符串数组，对吗？ Sort of like having signature [String] → [String] , right?有点像有签名[String] → [String] ，对吧？ If that's true, I need to find a way to map translate over arrays, such as strs , within that angular expression.如果这是真的，我需要找到一种方法来在该角度表达式中映射translate数组，例如strs 。
How can I do that or achieve what I want elegantly in the angular way?我怎样才能做到这一点或以有角度的方式优雅地实现我想要的？
Example .例子。 Say translate sends strings 'a' , 'b' , 'c' to 'z' , 'y' , 'x' respectively.假设translate发送字符串'a' 、 'b' 、 'c'到'z' 、 'y' 、 'x' 。 I then want the angular-enhanced html element above to produce an equivalent html output to:然后我希望上面的 angular-enhanced html 元素产生一个等效的 html 输出：
<div>c</div> <div>b</div> <div>a</div>
1 个解决方案
解决方案1
1 2016-03-11 17:27:45
If your translation library doesn't support translation on an array, I would add a new filter to your project for this purpose:如果您的翻译库不支持对数组进行翻译，我会为此向您的项目添加一个新过滤器：
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"]; });
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.