【问题标题】:How to implement a loop in a multi parameters filter in a ng-repeat?如何在 ng-repeat 的多参数过滤器中实现循环?
【发布时间】:2019-08-23 19:19:59
【问题描述】:

我想在过滤器参数中做一个循环

嘿,
我正在做一个多过滤器表。每列作为输入来添加要过滤的字符串。
对于每一列,我在过滤器函数中使用过滤器输入调用参数名称:paramN: filter[n]
有没有办法在其中创建一个循环,这样我就不必一个一个地编写每个参数?
我在一个数组中有我需要的一切,但我不知道如何(如果可能的话)在过滤器中调用它。
我应该使用自定义过滤器吗?如果是这样,语法是什么,会减慢进程吗?

这里是我的过滤器代码:

<tr ng-repeat="folder in listFolders|
    filter:{param1:filter[1],
            param2:filter[2],
            param3:filter[3],
            ...
            paramN: filter[n]
            } as listVisible
">

这是我的数组:

$scope.parametres=[
  {int:1, libelle:'name1', variable:'param1'},
  {int:2, libelle:'name2', variable:'param2'},
  {int:3, libelle:'name3', variable:'param3'},
  ...
  {int:n, libelle:'nameN', variable:'paramN'}
]

谢谢!

【问题讨论】:

  • 嗨爱丽丝,也许不是尝试通过过滤器执行此操作,而是在控制器或链接函数中进行过滤并将其存储在范围属性中然后迭代它是一个好主意使用 ng-repeat 指令的范围属性。
  • 嗨@JonathanDsouza,感谢您的评论。我正在尝试从控制器实现过滤,但这对我来说有点棘手。我想使用 $filter 函数 ($scope.filteredData = $filter('filter')(array, { param: "string"});) 但我需要动态传递 param 名称并且无法实现。不知道有没有可能?
  • 嗨@Alice,也许这为您指明了正确的方向lodash.com/docs/4.17.11#findKey
  • 我终于成功了,谢谢你的建议;)

标签: javascript html angularjs filter angularjs-ng-repeat


【解决方案1】:

万一有一天有人遇到和我一样的问题:

我在我的控制器中创建了这个函数(每次通过 ng-change 在过滤器输入中进行更改时都会调用它)

$scope.filteringFunction = function(){ 
    var filtered=angular.copy($scope.listFolders);
    for(var i=0; i<$scope.parametres.length; i++){
        if($scope.filter[$scope.parametres[i].int]!==''){
            var filter =$rootScope.toNoCase($scope.filter[$scope.parametres[i].int]);
            var param = $scope.parametres[i].variable;
            filtered = filtered.filter(function (item) {
                return $rootScope.toNoCase(item[param]).includes(filter);
            });
        }
    }
    $scope.listFoldersFiltered=filtered;
};

我对 ng-repeat 进行了一些更改(基本上删除了过滤器并将列表 listFolders 更改为 listFoldersFiltered

<tr ng-repeat="folder in listFoldersFiltered as listVisible">

如果有人知道其他方法,我会全力以赴!

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2014-10-22
    • 1970-01-01
    • 1970-01-01
    • 2014-04-14
    • 1970-01-01
    • 2021-02-15
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多