Question

我正在尝试过滤ng-repeat，但我正在尝试使用函数而不是实际的过滤器来过滤数据。我觉得这样的事情会起作用

<tr ng-repeat="(key, value) in dataObj| filter:dataFilter">

将dataFilter定义为范围函数。

    $scope.dataFilter = function (item) {
        console.log(item);
        return false
    };

显然，过滤器只是一个测试，我本来希望记录这些项目，并且对所有内容都返回false（因此在过滤器完成后不显示任何内容）。但是，由于日志不会被激活，因此甚至无法调用过滤器。我不确定我做错了什么。我想尝试这种使用函数的方法，而不是需要注入的实际过滤器。

使用更多代码进行更新

指令

(function () {
'use strict';
angular
    .module('test')
    .directive('myDirective', MyDirective);

function MyDirective() {
    return {
        templateUrl: 'test.html',
        controllerAs: 'controller',
        controller: 'MyController',
        "scope":{
            "dataObj" : '='
        }
    };
}
})();

控制器

(function () {
'use strict';
angular
    .module('test')
    .controller('MyController', MyController);

MyController.$inject = ['$scope'];

function MyController($scope) {

    $scope.dataFilter = function (item) {
        console.log(item);
        return false
    };

}
})();

的test.html

    <table>
        <tr ng-repeat="(key, value) in dataObj | filter:dataFilter">
            <td>{{key}}</td>
            <td>{{(value}}</td>
        </tr>
    </table>

上面的代码根本不会调用dataFilter函数。看来我必须把它称为一个函数，并可能发送一个参数。例如，如果我这样做：

<tr ng-repeat="(key, value) in dataObj | filter:dataFilter()">

控制台将记录＆＃34; undefined＆＃34;多次等于dataObj中的项目数。（显而易见，因为没有参数传入）。但令人困惑的是，即使我没有传递任何数据或进行任何实际过滤，我仍然希望视图不应该打印出任何数据，因为dataFilter（）返回false（作为当然测试）。然而，所有数据都打印出来了。

整体问题

作为过滤器的功能似乎根本不起作用，即使在实际调用时也是如此。我期望返回false的函数应该意味着ng-repeat将＆＃34; filter＆＃34; （跳过）那个特定的项目。

第二个问题是如何实际发送当前＆＃34;项目＆＃34;到dataFilter函数。我尝试过发送密钥和值，但都没有定义。

Answer 1

无法在对象上使用标准的$ filter服务，必须是一个数组 - documentation非常清楚。我不确定为什么你没有得到像this这样的错误 - 注意这个链接提供了一个如何实现自定义过滤器而不是操作对象的例子，这就是你想要的。

使用ng-if，ng-switch等来控制ng-repeat流程。关于影响ng-repeat迭代的$ filter结果的假设是错误的。

无论有人说什么，过滤对象（而不是数组）都是完全可以的，但如上所述，需要自定义过滤器，您声明不要不想要，因此根据您的要求，您没有留下任何解决方案。

Here's a fiddle与没有自定义过滤器的情况一样好。您拥有来提供数组。

<div ng-controller="myController">
  <table>
    <tr ng-repeat="(item,result) in model | filter:myfilter"   
        ng-if="result">    
      <td>{{result.key}}=</td>
      <td>{{result.value}}</td>
    </tr>
  </table>
</div>

为了清楚起见，请注意上述（项目，结果）不是（键，值）。这是代码。

var myApp = angular.module('myApp', []);

myApp.controller('myController', ['$scope', function($scope) {
  // You cannot pass standard $filter an object.  It MUST be an array.
  var obj = {
    pi: 3.14,
    aqua: "teen",
    then: new Date(),
    hunger: "force",
  }
  $scope.model = [];

  for (var key in obj) {
    if (obj.hasOwnProperty(key))
      $scope.model.push({
        key: key,
        value: obj[key]
      })
  }

  $scope.myfilter = function(item, index) {
    console.log(item.key + " = " + item.value)
    if (index % 2 == 0)
      return undefined;
    return item;
  }
}]);

Angular：使用函数作为自定义过滤器

1 个答案: