如何在控制器中使用过滤器?

sum*_*nth 634 angularjs angular-filters ng-controller

我编写了一个过滤函数,它将根据您传递的参数返回数据.我想在我的控制器中使用相同的功能.是否可以在控制器中重用过滤器功能?

这是我到目前为止所尝试的:

function myCtrl($scope,filter1)
{ 
    // i simply used the filter function name, it is not working.
}
Run Code Online (Sandbox Code Playgroud)

JSA*_*ict 1038

向控制器注入$ filter

function myCtrl($scope, $filter)
{
}
Run Code Online (Sandbox Code Playgroud)

然后,无论您想要使用哪个过滤器,只需使用它:

$filter('filtername');
Run Code Online (Sandbox Code Playgroud)

如果要将参数传递给该过滤器,请使用单独的括号:

function myCtrl($scope, $filter)
{
    $filter('filtername')(arg1,arg2);
}
Run Code Online (Sandbox Code Playgroud)

arg1您要过滤的数组在哪里,是用于过滤arg2的对象.

  • @ gm2008你可以使用数字过滤器,如`var anyNumber = $ filter('number')(12.222222,2);`得到`12.22`. (34认同)
  • 对不起,先生,我还是不明白.您是否可以制作一个Jsfiddle来展示如何定义过滤器函数体以及如何将其插入HTML文件中? (20认同)
  • +我回答问题......"如何在控制器中使用过滤器?" (19认同)
  • 在过滤器中使用"货币"构建的示例:`$ filter("currency")(price,"$",2)`因此,如果您的价格= 200,那么该表达式将返回"$ 200.00". (8认同)
  • @pkozlowski.opensource 的答案比这更好,因为它减少了“魔法字符串”。一个好处 - 如果这是在一个更复杂的控制器中并且您未能对正在使用的过滤器进行单元测试怎么办?如果您使用`$filter('filter1')` (2 t's),您就不会注意到该错误。然而,如果你注入 `filter1Filter`,Angular 会立即抱怨依赖不存在。 (2认同)

pko*_*rce 248

@Prashanth提供的答案是正确的,但有更简单的方法可以做到这一点.基本上不是注入$filter依赖项并使用调用它的笨拙语法($filter('filtername')(arg1,arg2);),而是可以注入依赖项:filter name加上Filter后缀.

从一个问题的例子可以写:

function myCtrl($scope, filter1Filter) { 
  filter1Filter(input, arg1);
}
Run Code Online (Sandbox Code Playgroud)

应该注意的是Filter,无论您使用什么命名约定,都必须附加到过滤器名称:调用fooFilter
fooFilter引用foo通过调用引用fooFilterFilter

  • 当然..但我仍然要找一个用例,你想在一个类中注入10个过滤器...这样的类可能会违反单一责任原则...... (38认同)
  • @OZ_你是什么意思?它是否有效.缩小与此无关,请参阅此插件:http://plnkr.co/edit/1k6nJnHO8ukBWUfgAyQw?p = preview (13认同)
  • 只是为了说清楚,这不是"尴尬"的JS语法... var fooFilter = $ filter('foo'); fooFilter(arg1,arg2); (10认同)
  • 这是使用单个过滤器的理想选择,这是我遇到的情况. (2认同)
  • +1我认为$ filter语法隐藏了依赖关系,从而导致代码的可维护性降低."静态"注入过滤器是更好的选择. (2认同)

aam*_*jad 78

使用以下示例代码,我们可以按名称过滤角度控制器中的数组.这基于以下描述. http://docs.angularjs.org/guide/filter

this.filteredArray = filterFilter(this.array,{name:'Igor'});

JS:

 angular.module('FilterInControllerModule', []).
    controller('FilterController', ['filterFilter', function(filterFilter) {
      this.array = [
        {name: 'Tobias'},
        {name: 'Jeff'},
        {name: 'Brian'},
        {name: 'Igor'},
        {name: 'James'},
        {name: 'Brad'}
      ];
      this.filteredArray = filterFilter(this.array, {name:'Igor'});
    }]);
Run Code Online (Sandbox Code Playgroud)

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example96-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.3/angular.min.js"></script>
  <script src="script.js"></script>



</head>
<body ng-app="FilterInControllerModule">
    <div ng-controller="FilterController as ctrl">
    <div>
      All entries:
      <span ng-repeat="entry in ctrl.array">{{entry.name}} </span>
    </div>
    <div>
      Filter By Name in angular controller
      <span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span>
    </div>
  </div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

  • filterFilter(this.array,{name:'Igor'}); filterFilter是一个关键字或它自动过滤掉数据的原因以及为什么['filterFilter',function(filterFilter){在这里定义!? (4认同)

Mik*_*ill 48

这是filter在Angular控制器中使用的另一个例子:

$scope.ListOfPeople = [
    { PersonID: 10, FirstName: "John", LastName: "Smith", Sex: "Male" },
    { PersonID: 11, FirstName: "James", LastName: "Last", Sex: "Male" },
    { PersonID: 12, FirstName: "Mary", LastName: "Heart", Sex: "Female" },
    { PersonID: 13, FirstName: "Sandra", LastName: "Goldsmith", Sex: "Female" },
    { PersonID: 14, FirstName: "Shaun", LastName: "Sheep", Sex: "Male" },
    { PersonID: 15, FirstName: "Nicola", LastName: "Smith", Sex: "Male" }
];

$scope.ListOfWomen = $scope.ListOfPeople.filter(function (person) {
    return (person.Sex == "Female");
});

//  This will display "There are 2 women in our list."
prompt("", "There are " + $scope.ListOfWomen.length + " women in our list.");
Run Code Online (Sandbox Code Playgroud)

简单,嘿?

  • 这正是我所需要的,谢谢.虽然显然这不是*问题是什么.:) (6认同)

Jef*_*aal 35

有三种可能的方法可以做到这一点.

假设您有以下简单过滤器,它将字符串转换为大写,仅包含第一个字符的参数.

app.filter('uppercase', function() {
    return function(string, firstCharOnly) {
        return (!firstCharOnly)
            ? string.toUpperCase()
            : string.charAt(0).toUpperCase() + string.slice(1);
    }
});
Run Code Online (Sandbox Code Playgroud)

直接通过 $filter

app.controller('MyController', function($filter) {

    // HELLO
    var text = $filter('uppercase')('hello');

    // Hello
    var text = $filter('uppercase')('hello', true);

});
Run Code Online (Sandbox Code Playgroud)

注意:这使您可以访问所有过滤器.


分配$filtervariable

此选项允许您使用$filter类似a function.

app.controller('MyController', function($filter) {

    var uppercaseFilter = $filter('uppercase');

    // HELLO
    var text = uppercaseFilter('hello');

    // Hello
    var text = uppercaseFilter('hello', true);

});
Run Code Online (Sandbox Code Playgroud)

仅加载特定的 Filter

您可以通过附加过滤器名称来仅加载特定过滤器Filter.

app.controller('MyController', function(uppercaseFilter) {

    // HELLO
    var text = uppercaseFilter('hello');

    // Hello
    var text = uppercaseFilter('hello', true);

});
Run Code Online (Sandbox Code Playgroud)

您使用哪一个是个人偏好,但我建议使用第三个,因为它是最易读的选项.


小智 15

function ngController($scope,$filter){
    $scope.name = "aaaa";
    $scope.age = "32";

     $scope.result = function(){
        return $filter('lowercase')($scope.name);
    };
}
Run Code Online (Sandbox Code Playgroud)

控制器方法第二个参数名称应该是"$ filter",那么只有过滤器功能才能用于此示例.在这个例子中,我使用了"小写"过滤器.


小智 12

我有另一个例子,我为我的过程做了:

我得到一个像这样的值 - 描述的数组

states = [{
    status: '1',
    desc: '\u2713'
}, {
    status: '2',
    desc: '\u271B'
}]
Run Code Online (Sandbox Code Playgroud)

在我的Filters.js中:

.filter('getState', function () {
    return function (input, states) {
        //console.log(states);
        for (var i = 0; i < states.length; i++) {
            //console.log(states[i]);
            if (states[i].status == input) {
                return states[i].desc;
            }
        }
        return '\u2718';
    };
})
Run Code Online (Sandbox Code Playgroud)

然后,测试var(控制器):

function myCtrl($scope, $filter) {
    // ....
    var resp = $filter('getState')('1', states);
    // ....
}
Run Code Online (Sandbox Code Playgroud)


Haz*_*yan 7

AngularJs允许您在模板内部或Controller,Directive等内部使用过滤器.

在模板中,您可以使用此语法

{{ variable | MyFilter: ... : ... }}
Run Code Online (Sandbox Code Playgroud)

在内部控制器中,您可以使用注入$ filter服务

angular.module('MyModule').controller('MyCtrl',function($scope, $filter){
    $filter('MyFilter')(arg1, arg2);
})
Run Code Online (Sandbox Code Playgroud)

如果你需要更多的Demo示例,这里有一个链接

AngularJs过滤器示例和演示


Sim*_*lGy 6

还有另一种方法可以评估从视图中反映语法的过滤器.调用是毛茸茸的,但你可以建立一个快捷方式.我喜欢字符串的语法与您在视图中的语法相同.看起来像这样:

function myCtrl($scope, $interpolate) { 
  $scope.$eval($interpolate( "{{ myvar * 10 | currency }} dollars." ))
}
Run Code Online (Sandbox Code Playgroud)


pav*_*vok 5

似乎没有人提到可以在$ filter('filtername')(arg1,arg2);中使用arg2函数

例如:

$scope.filteredItems = $filter('filter')(items, function(item){return item.Price>50;});
Run Code Online (Sandbox Code Playgroud)