html - 如何在 ng-repeat 过滤器中添加动态列

Question

filter:{'Is'+dType.Name:true}是否可以在过滤器中添加动态列ng-repeat？

<option ng-repeat="option in mainCtrl.Maps | filter:{'Is'+dType.Name:true}" ng-value="option.Id">{{option.Name}}</option>

标签： htmlangularjsangularjs-ng-repeat

Answer 1

不，Angular 会抛出一个错误。但是您可以改用函数，并且该函数可以使用动态属性，例如：

<option ng-repeat="option in mainCtrl.Maps | filter:filterFn" ng-value="option.Id">{{option.Name}}</option>

在控制器中：

$scope.filterFn = function(option) {
  var propName = 'Is' + $scope.dType.Name; // assuming that dType is somewhere in the scope
  return option[propName] === true; // this replaces the shorthand filter in the ng-repeat
}

编辑（由于不属于原始问题的其他详细信息）：

如果您想将附加参数传递给您的过滤器函数，您可以使用我在以下 SO 答案中找到的内容：如何在 AngularJS 的过滤器中使用参数？

适应您的情况：

<option ng-repeat="option in mainCtrl.Maps | filter:filterFn(dType)" ng-value="option.Id">{{option.Name}}</option>

在控制器中：

$scope.filterFn = function(dType) {
  return function (option) {
    var propName = 'Is' + dType.Name; // dType is passed as parameter
    return option[propName] === true; 
  };
};

简而言之，您的过滤器函数必须返回一个具有 Angular 所期望的签名的函数（具有一个参数的函数：元素 of ng-repeat），但由于包装它还可以处理其他参数。