过滤器不使用选项

Question

我尝试使用基于Angular 1.4.8

的自定义过滤器翻译选项

我创建了一个简单的例子来测试任何项目是否可以附加字符串“123”

app.filter('mytranslation', ['$rootScope', function($rootScope) {
  return function(t_str) {
    return t_str + "123";
  };
}]);

然而，我得到了这个明确的例外，

  

错误：[$ injector：unpr]过滤器

关于NG过滤器的其他教程也没有用。

• AngularJS : ng-repeat filter when value is greater than
• How can I add internationalization to a select drop down with AngularJS?

两个haml代码也不起作用

%select{"ng-options" => "item.id as item.from for item in routes | mytranslation ", "ng-model"=>"selected"}
%select{"ng-options" => "item.id as (item.from | mytranslation ) for item in routes  ", "ng-model"=>"selected"}

控制台上的异常

    Error: [$injector:unpr] http://errors.angularjs.org/1.4.8/$injector/unpr?p0=mytranslationFilterProvider%20%3C-%20mytranslationFilter
        at Error (native)
        at http://localhost:3000/assets/angular/angular.min-b5b8b02773bd468b763522da33293b86.js?body=1:7:416
        at http://localhost:3000/assets/angular/angular.min-b5b8b02773bd468b763522da33293b86.js?body=1:42:121
        at Object.d [as get] (http://localhost:3000/assets/angular/angular.min-b5b8b02773bd468b763522da33293b86.js?body=1:40:92)
        at http://localhost:3000/assets/angular/angular.min-b5b8b02773bd468b763522da33293b86.js?body=1:42:195
        at Object.d [as get] (http://localhost:3000/assets/angular/angular.min-b5b8b02773bd468b763522da33293b86.js?body=1:40:92)
        at http://localhost:3000/assets/angular/angular.min-b5b8b02773bd468b763522da33293b86.js?body=1:150:129
        at W (http://localhost:3000/assets/angular/angular.min-b5b8b02773bd468b763522da33293b86.js?body=1:112:209)
        at http://localhost:3000/assets/angular/angular.min-b5b8b02773bd468b763522da33293b86.js?body=1:110:334
        at n (http://localhost:3000/assets/angular/angular.min-b5b8b02773bd468b763522da33293b86.js?body=1:8:333) <select ng-model="selected" ng-options="item.id as item.from for item in routes | mytranslation " class="ng-pristine ng-untouched ng-valid">

更新版本2

routes（对象数组）

[
{
from: "BANGKOK",
to: [
"KAOHSIUNG",
"TAIPEI",
"OSAKA",
"TOKYO",
"SINGAPORE"
]
},
{
from: "CHIANGMAI",
to: [
"TAIPEI"
]
},
]

未触发文件管理器

app.filter('mytranslation', function(data){
    return data + "123";
});

生成的HTML（不是我的期望）

    <select ng-model="selected" ng-options="item.id as item.from for item in routes | filter:mytranslation" class="ng-pristine ng-untouched ng-valid">
        <option label="BANGKOK" value="undefined:undefined">BANGKOK</option>
        .....
        <option label="CHIANGMAI" value="undefined:undefined">CHIANGMAI</option>

期望结果应为

    <select ng-model="selected" ng-options="item.id as item.from for item in routes | filter:mytranslation" class="ng-pristine ng-untouched ng-valid">
        <option label="BANGKOK" value="BANGKOK">BANGKOK123</option>
        .....
        <option label="CHIANGMAI" value="CHIANGMAI">CHIANGMAI123</option>    

Answer 1

<强>更新

您不需要在html中指定filter:。只需在那里指定过滤器名称（mytranslation）。喜欢这个

<select ng-model="selected" ng-options="item.id as (item.from | mytranslation) for item in routes" class="ng-pristine ng-untouched ng-valid"></select>

你的过滤器在JS中应该是这样的

app.filter('mytranslation', function(){
    return function(data){
        return data + "123";
    }
});

在这里创建一个有效的JSFiddle http://jsfiddle.net/WfuAh/151/

Answer 2

语法版本无效

app.filter('mytranslation', function(data){
    return data + "123";
});

有效版本

app.filter('mytranslation', function(){
  return function(data){
    return data + "123";
  }
});