AngularJS 以编程方式从服务调用过滤器（按自定义过滤器排序）

Posted 2023-02-27

【中文标题】AngularJS 以编程方式从服务调用过滤器（按自定义过滤器排序）

【英文标题】：AngularJS programatically call filter from service (sort by custom filter)

【发布时间】：2015-08-15 22:37:48

【问题描述】：

我有以下情况（服务中的翻译过滤器，在html文件中使用）

// serviceFile
angular.module('myModule')
  .service('translation')
  .filter('translate', function(translation) 
    // translate stuff
    return 'translatedString';
  );

// controllerFile
angular.module('myModule')
  .controller('StringsController', function(blabla, translation) 
    $scope.mySort = function() 
      return "some magic should happen here";
    ;
  );

// htmlFile
<tr ng-repeat="string in strings">
  <td> 
       string | translate: 'name'  
  </td>
</tr>

（上面的代码可以，但可能由于我缺乏经验而省略了一些重要部分）

我的问题是我被要求根据翻译后的值（类似于string in strings | orderBy: mySearch）进行排序，但我找不到如何从StringsController.mySearch 以编程方式调用过滤器

附：过滤器没有从服务返回（不知道这是否相关）

【问题讨论】：

你需要注入 $filter 并像 $filter('translation')(params)

一样使用它

@Grundy，你能给我一个新手链接吗？我只使用了非常基本的 angularjs，服务甚至不是我的代码。我什至不知道我应该将它注入控制器还是服务？

另见guid for filters

【参考方案1】：

你可以看到guide for filters

所以在你的情况下取决于定义.filter('translate', 你可以像使用它

.controller('StringsController', function(blabla, $filter) 
    //simple transtale
    var translatedString = $filter('translate')(stringForTranslate);

    //ordering
    var ordered = $filter('orderBy')(arrayForOrdering,function(el) return  $filter('translate')(el); )

);

【讨论】：

我添加了 $scope.mySearch = function(string) return $filter('translate')(string); 到控制器，还有一开始的 $fitler ......我唯一剩下的问题是如何获得“名字”......顺便说一句，感谢到目前为止的帮助......

你能提供一个复杂的样本吗？可能使用jsfiddle 或plunker，这里展示一个基本方法，如何在控制器中进行过滤和排序

在做jsfiddle时我找到了解决方案...不得不修改为 $filter('translate')(stringForTranslate, 'name');感谢所有帮助

@norb 你很高兴 :-)

@norb，我也对您的示例过滤器声明感到有些困惑，所以它返回的不是字符串，而是像 function (string, param) 这样的函数，其中 return 'translatedString';