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

这个解决方案涵盖了重用Angular过滤器。这是过滤数据的另一种方式，当我需要这样的时候，谷歌让我来到这里;我喜欢分享。

用例

如果你已经过滤了，比如在你的视图中使用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过滤器定义示例

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

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

在控制器内使用Filter函数示例1

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

例2:在控制器中使用Filter函数

使用优先筛选器，仅在没有找到重复项时显示按钮。

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

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

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

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

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

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

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

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

这个解决方案涵盖了重用Angular过滤器。这是过滤数据的另一种方式，当我需要这样的时候，谷歌让我来到这里;我喜欢分享。

用例

如果你已经过滤了，比如在你的视图中使用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过滤器定义示例

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

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

在控制器内使用Filter函数示例1

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

例2:在控制器中使用Filter函数

使用优先筛选器，仅在没有找到重复项时显示按钮。

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

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

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

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

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

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

    var uppercaseFilter = $filter('uppercase');

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

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

});

只加载一个特定的过滤器

通过将筛选器名称与filter附加在一起，可以只加载特定的筛选器。

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

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

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

});

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

首先注入$filter到你的控制器中，确保ngSanitize被加载到你的应用中，随后在控制器中使用如下:

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

经常查看angularjs的文档