如何在 AngularJS 的过滤器中使用参数?

IT技术 javascript angularjs
2021-03-06 23:38:55

我想在过滤器中使用参数,当我用 ng-repeat 迭代一些数组时

例子:

HTML 部分:

<tr ng-repeat="user in users | filter:isActive">

JavaScript 部分:

$scope.isActive = function(user) {
    return user.active === "1";
};

但我希望能够使用过滤器

<tr ng-repeat="user in users | filter:isStatus('4')">

但它不工作。我怎么能做这样的事情?

5个回答

更新:我想我并没有真正很好地查看文档,但是您绝对可以使用具有此语法过滤过滤器(请参阅此小提琴)来按对象上的属性进行过滤:

<tr ng-repeat="user in users | filter:{status:4}">

这是我的原始答案,以防它对某人有所帮助:

使用过滤过滤器您将无法传入参数,但您至少可以做两件事。

1)在范围变量中设置要过滤的数据,并在您的过滤器函数中引用该 fiddle

JavaScript:

$scope.status = 1;
$scope.users = [{name: 'first user', status: 1},
                {name: 'second user', status: 2},
                {name: 'third user', status: 3}];

$scope.isStatus = function(user){
    return (user.status == $scope.status);
};

网址:

<li ng-repeat="user in users | filter:isStatus">

或者

2)创建一个新的过滤器,它接受像这个 fiddle这样的参数

JavaScript:

var myApp = angular.module('myApp', []);
myApp.filter('isStatus', function() {
  return function(input, status) {
    var out = [];
      for (var i = 0; i < input.length; i++){
          if(input[i].status == status)
              out.push(input[i]);
      }      
    return out;
  };
});

网址:

<li ng-repeat="user in users | isStatus:3">

请注意,此过滤器假定status数组中的对象中有一个属性,这可能会降低其可重用性,但这只是一个示例。您可以阅读本文以了解有关创建过滤器的更多信息。

如果我想同时过滤“名称”​​和“状态”怎么办。用户可以在文本框中输入名称或状态,我希望它进行过滤。有什么办法,例如:filter:{status:4, name:Mark}"
2021-04-23 23:38:55
@mcranston18 我链接的 3 个小提琴在最新版本的 Chrome 中为我工作。对你来说哪里坏了?
2021-05-03 23:38:55
对于 2),知道您可以将多个参数传递给自定义过滤器可能很有用,即使是从模板中也是如此。
2021-05-06 23:38:55

这个问题几乎与Passing arguments to angularjs filters相同,我已经给出了答案。但是我会在这里再发布一个答案,以便人们看到它。

实际上还有另一个(可能更好的解决方案),您可以在其中使用 angular 的原生“过滤器”过滤器,并且仍然将参数传递给您的自定义过滤器。

考虑以下代码:

    <li ng-repeat="user in users | filter:byStatusId(3)">
        <span>{{user.name}}</span>
    <li>

要完成这项工作,您只需将过滤器定义如下:

$scope.byStatusId = function(statusId) {
    return function(user) {
        return user.status.id == statusId;
    }
}

这种方法更加通用,因为您可以对嵌套在对象内部深处的值进行比较。

查看angular.js 过滤器的反向极性以了解如何将其用于过滤器的其他有用操作。

@DenisPshenov 我遇到的问题在于status使用附加变量时的可见性我采取了不同的方法使用ng-modelng-options
2021-04-18 23:38:55
@DenisPshenov 如果我想包含a另一个值怎么办?<li ng-repeat="status in statuses | filter:currentStatus(status, scopevar.status)" ???<--这不起作用
2021-04-21 23:38:55
@Garry,然后您需要在过滤器中请求其他值,例如$scope.currentStatus = function(status, otherValue) { ... }. 你是这个意思吗?
2021-04-25 23:38:55
出于某种奇怪的原因,这对我不起作用。我有一个ng-repeat="a in array | filter: myFilterFunc">在视图中。在我的控制器中$scope.myFilterFunc = function() {..}......它不起作用。
2021-04-26 23:38:55
请仔细看看我的回答,您的过滤器必须返回一个函数,$scope.myFilterFunc = function() { return function(item) { // actual filter code goes here } }并且您必须将过滤器作为函数调用,例如filter:myFilterFunc()
2021-05-04 23:38:55

如果你已经创建了一个 AngularJs 自定义过滤器,你可以向你的过滤器发送多个参数。这是模板中的用法

{{ variable | myFilter:arg1:arg2...  }}

如果您在控制器中使用过滤器,您可以这样做

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

如果您需要更多示例和在线演示,您可以使用它

AngularJs 过滤器示例和演示

这可能有点无关紧要,但如果您尝试使用自定义函数应用多个过滤器,您应该查看:https : //github.com/tak215/angular-filter-manager

示例我有一个学生列表如下:

$scope.students = [  
   { name: 'Hai', age: 25, gender: 'boy' },  
   { name: 'Hai', age: 30, gender: 'girl' },  
   { name: 'Ho', age: 25, gender: 'boy' },  
   { name: 'Hoan', age: 40, gender: 'girl' },  
   { name: 'Hieu', age: 25, gender: 'boy' }  
 ];  

我想通过性别过滤学生成为男孩并按他们的名字过滤。

首先,我创建了一个名为“filterbyboy”的函数,如下所示:

$scope.filterbyboy = function (genderstr) {  
   if ((typeof $scope.search === 'undefined')||($scope.search === ''))  
     return (genderstr = "")  
   else  
    return (genderstr = "boy");  
 };  

说明:如果不过滤姓名,则显示所有其他学生按输入姓名和性别过滤为“男孩”

这是完整的 HTML 代码和演示如何在 AngularJs 示例中使用和运算符