提问



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


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


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

最佳参考


$ filter 注入您的控制器


function myCtrl($scope, $filter)
{
}


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


$filter('filtername');


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


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


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

其它参考1


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


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


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


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

其它参考2


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


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>

其它参考3


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


简单,嘿?

其它参考4


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



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


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

});





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

其它参考5


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

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



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


其它参考6


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


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


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


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


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

其它参考7


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


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


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


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


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


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


AngularJs过滤器示例和演示[41]

其它参考8


还有另一种方法可以评估镜像视图语法的过滤器。调用很多,但您可以构建一个快捷方式。我喜欢字符串的语法与您在视图中的语法相同。看起来像这样:


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

其它参考9


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


例如:


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

其它参考10


在控制器中使用$ filter的简单日期示例如下:


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


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

其它参考11


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


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

其它参考12


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


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


总是看看angularjs docs [43]