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

Question

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

这是我迄今为止尝试过的：

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

Answer 1

将$filter注入您的控制器

function myCtrl($scope, $filter)
{
}

然后，无论您想在何处使用该过滤器，都可以像这样使用它：

$filter('filtername');

如果要将参数传递给该过滤器，请使用单独的括号进行操作：

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

其中arg1是您要过滤的数组， arg2是用于过滤的对象。

Answer 2

@Prashanth 提供的答案是正确的，但有更简单的方法来做同样的事情。 基本上，不是注入$filter依赖项并使用笨拙的调用它的语法（ $filter('filtername')(arg1,arg2); ），可以注入依赖项：过滤器名称加上Filter后缀。

以可以写的问题为例：

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

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

Answer 3

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

Answer 4

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

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

简单，嘿？

Answer 5

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

假设您有以下简单的过滤器，它将字符串转换为大写，参数仅用于第一个字符。

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

});

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

---

将$filter分配给variable

此选项允许您像使用function一样使用$filter 。

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

});

---

您使用哪一个取决于个人喜好，但我建议使用第三个，因为它是最易读的选项。

Answer 6

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

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

控制器方法的第二个参数名称应该是“$filter”，那么只有过滤器功能才能在这个例子中工作。 在这个例子中，我使用了“小写”过滤器。

Answer 7

我还有另一个例子，我为我的过程制作的：

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

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);
    // ....
}

Answer 8

AngularJs 允许您在模板内部或控制器、指令等内部使用过滤器。

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

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

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

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

如果您需要更多演示示例，这里是一个链接

AngularJs 过滤器示例和演示

Answer 9

还有另一种评估过滤器的方法，它反映了视图中的语法。 这个调用很麻烦，但你可以建立一个快捷方式。 我喜欢字符串的语法与您在视图中的语法相同。 看起来像这样：

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

Answer 10

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

例如：

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

Answer 11

在控制器中使用 $filter 的简单日期示例是：

var myDate = new Date();
$scope.dateAsString = $filter('date')(myDate, "yyyy-MM-dd"); 

如此处所述 - https://stackoverflow.com/a/20131782/262140

Answer 12

如果我们想添加多个条件，而不是在 javascript 角度过滤器中添加单个值，请使用以下代码：

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

Answer 13

首先将 $filter 注入您的控制器，确保 ngSanitize 已加载到您的应用程序中，稍后在控制器中使用如下：

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

始终查看 angularjs 文档

Answer 14

如果你想过滤控制器中的对象试试这个

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

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

Answer 15

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

此解决方案涵盖重用角度过滤器。 这是过滤数据的另一种方式，当我需要这种方式时，谷歌将我带到了这里； 我喜欢分享。

用例

如果您已经在过滤，例如在您的视图中使用 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 中的使用

仅当未找到重复项时才显示 Button，使用优先过滤器。

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