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

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()">

控制台将记录“未定义”的次数等于 dataObj 中的项目数。 （很明显，因为没有传入参数）。但令人困惑的是，即使我没有传递任何数据或进行任何真正的过滤，我仍然希望视图根本不应该打印出任何数据，因为 dataFilter() 返回 false （作为对课程）。然而，所有数据都以 .

总体问题

作为过滤器的功能似乎根本不起作用，即使在实际调用时也是如此。我预计返回 false 的函数应该意味着 ng-repeat 将“过滤”（跳过）该特定项目。

第二个问题是如何将当前“项目”实际发送到 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;
  }
}]);