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


649

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

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

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

Answers:


1051

$ filter注入控制器

function myCtrl($scope, $filter)
{
}

然后,无论您想在哪里使用该过滤器,都可以像这样使用它:

$filter('filtername');

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

function myCtrl($scope, $filter)
{
    $filter('filtername')(arg1,arg2);
}

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


21
抱歉,先生,我还是不明白。您能否制作一个Jsfiddle来展示如何定义过滤器函数主体以及如何将其插入HTML文件?
gm2008 2014年

34
@ gm2008您可以使用数字过滤器var anyNumber = $filter('number')(12.222222, 2);来获取12.22
vinesh 2014年

20
+我回答的问题是……“如何在控制器中使用过滤器?”
Shanimal

8
过滤器中包含“ currency”的示例:$filter("currency")(price, "$", 2)因此,如果价格为200,则该表达式将返回“ $ 200.00”。
Netsi1964年

2
@ pkozlowski.opensource的答案比这更好,因为它减少了“魔术字符串”。好处之一-如果这是在复杂得多的控制器中,而您无法对使用的过滤器进行单元测试,该怎么办?如果使用$filter('filtter1')(2吨),您不会注意到该错误。但是,如果您注入filtter1FilterAngular,则会立即抱怨该依赖项不存在。
jkjustjoshing

253

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

以这个问题为例可以写:

function myCtrl($scope, filter1Filter) { 
  filter1Filter(input, arg1);
}

应当注意,Filter无论使用哪种命名约定,都必须在过滤器名称后附加:调用foo引用foo过滤器fooFilter
调用fooFilterFilter


38
当然..但是我仍然找到一个用例,在该用例中,您想向一个类注入10个筛选器...这样的类可能会违反单一责任原则...
pkozlowski.opensource,2013年

10
为了清楚起见,这不是“笨拙的” JS语法……var fooFilter = $ filter('foo'); fooFilter(arg1,arg2);
blindgaenger13年

13
@OZ_是什么意思?不管缩小与否。缩小与此处无关,请参阅以下内容:plnkr.co/edit/1k6nJnHO8ukBWUfgAyQw?p=preview
pkozlowski.opensource

2
这是我遇到的单个过滤器的理想选择。
Matthew Fotzler 2014年

2
+1我认为$ filter语法隐藏了依赖关系,从而导致代码的可维护性较差。“静态”注入过滤器是更好的选择。
BiAiB 2015年

79

使用以下示例代码,我们可以按名称过滤角度控制器中的数组。这是基于以下描述。 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'});
    }]);

的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>

4
filterFilter(this.array,{name:'Igor'}); 是filterFilter一个关键字或其自动过滤出数据的内容,以及为什么['filterFilter',function(filterFilter){在此定义!?
suraj rawat 2015年

带有此技术更多示例的Plnkr
OzBob 2016年

非常有帮助。谢谢。
库沙尔Jayswal '17

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.");

简单,嘿?


6
这正是我需要的,谢谢。尽管显然这不是问题所在。:)
pvgoran

38

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

假设您具有以下简单过滤器,该过滤器将字符串转换为大写形式,并且仅将参数用于第一个字符。

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

直接通过 $filter

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

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

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

});

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


分配$filtervariable

此选项允许你使用$filterfunction

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

    var uppercaseFilter = $filter('uppercase');

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

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

});

仅加载特定 Filter

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

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

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

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

});

您会使用哪一种来满足个人喜好,但我建议您使用第三种,因为这是最易读的选项。


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

     $scope.result = function(){
        return $filter('lowercase')($scope.name);
    };
}

控制器方法的第二个参数名称应为“ $ filter”,然后只有过滤器功能才能在此示例中使用。在此示例中,我使用了“小写”过滤器。


12

我还有另一个示例,是我为过程创建的:

我得到一个带有值描述的数组,像这样

states = [{
    status: '1',
    desc: '\u2713'
}, {
    status: '2',
    desc: '\u271B'
}]

在我的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';
    };
})

然后,一个测试变量(控制器):

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

可以在angularjs 1.0.8中使用吗?怎么把它并不是me..says工作,我补充说,在控制器后$过滤器甚至没有定义
沙金

7

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

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

{{ variable | MyFilter: ... : ... }}

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

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

如果您需要有关演示示例的更多信息,请单击此处的链接

AngularJs过滤器示例和演示


暗示不是一个词。你是说注射吗
kevinc

oops.yea我的意思是注射。
Hazarapet Tunanyan

6

评估过滤器的另一种方法是从视图中镜像语法。调用很麻烦,但是您可以为其建立快捷方式。我喜欢字符串的语法与视图中的语法相同。看起来像这样:

function myCtrl($scope, $interpolate) { 
  $scope.$eval($interpolate( "{{ myvar * 10 | currency }} dollars." ))
}

这实际上非常有用!
DragonKnight

1
这太棒了,因为它允许我传递看起来像标记中的字符串。
kevinc

5

似乎没有人提到可以在arg2中使用函数 $过滤器(“FILTERNAME”)(ARG1,ARG2);

例如:

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


1

如果我们要添加多个条件,而不是javascript角度过滤器中的单个值,请使用以下代码:

var modifiedArray = $filter('filter')(array,function(item){return (item.ColumnName == 'Value1' || item.ColumnName == 'Value2');},true)

1

首先将$ filter注入到控制器中,确保ngSanitize已在您的应用程序中加载,随后在控制器中的用法如下:

$filter('linky')(text, target, attributes)

总是检查angularjs文档


1

如果要过滤控制器中的对象,请尝试此

var rateSelected = $filter('filter')($scope.GradeList, function (obj) {
                        if(obj.GradeId == $scope.contractor_emp.save_modal_data.GradeId)
                        return obj;
                });

这将根据条件返回过滤对象


0

重用Angular.js过滤器-视图/控制器

该解决方案涵盖了重用角度过滤器。这是过滤数据的另一种方法,当我需要时Google便将我降落在这里。我喜欢分享。

用例

如果您已经在过滤,例如在视图中用ng-repeat表示(如下所示),则可能已在控制器中定义了过滤器,如下所述。然后,您可以像最终示例中那样重复使用。

过滤器使用示例-过滤后的重复视图

<div ng-app="someApp" ng-controller="someController">
    <h2>Duplicates</h2>
    <table class="table table-striped table-light table-bordered-light">
        <thead>
            <tr>
                <th>Name</th>
                <th>Gender</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="person in data | filter: searchDuplicate:true">
                <td>{{person.name}}</td>
                <td>{{person.gender}}</td>
            </tr>
        </tbody>
    </table>
</div>

角度过滤器定义示例

angular.module('someApp',[])
.controller('someController', function($scope, $filter ) {

    $scope.people = [{name: 'Bob', gender: 'male'  , hasDuplicate: true },
                     {name: 'Bob', gender: 'male'  , hasDuplicate: true },
                     {name: 'Bob', gender: 'female', hasDuplicate: false}];

    $scope.searchDuplicate = { hasDuplicate : true };
})

因此,这里的概念是您已经在使用为视图创建的过滤器,然后意识到您也想在控制器中使用它。

控制器示例中过滤器功能的使用1

var dup = $filter('filter')($scope.people, $scope.searchDuplicate, true)

控制器示例2中的过滤器功能使用

使用先前的过滤器,仅当找不到重复项时显示按钮。

HTML按钮

<div ng-if="showButton()"><button class="btn btn-primary" ng-click="doSomething();"></button></div>

显示/隐藏按钮

$scope.doSomething = function(){ /* ... */ };
$scope.showButton = function(){ return $filter('filter')($scope.people, $scope.searchDuplicate, true).length == 0; };

某些人可能会发现此版本的过滤很容易,并且它是Angular.js选项。

视图和$ filter函数调用中使用的可选比较器参数“ true”指定您要进行严格比较。如果省略,则可以在多个列中搜索值。

https://docs.angularjs.org/api/ng/filter/filter

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.