筛选器无法使用选项

Filter not working with options

本文关键字：选项 筛选      更新时间：2023-09-26

>我尝试使用基于 Angular 1.4.8 的自定义过滤器翻译选项项

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

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

但是，我得到了这个模棱两可的例外，

错误： [$injector：unpr] 筛选器

关于NG过滤器的其他教程也不起作用。

  • AngularJS：当值大于时，ng重复过滤器
  • 如何使用 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

路由（对象数组）

[
{
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>

更新

您不需要在 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/

语法版本无效

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

有效版本

app.filter('mytranslation', function(){
  return function(data){
    return data + "123";
  }
});
相关文章：