Angularjs - 带有过滤器的 NG-repeat 到阵列不起作用

Question

我认为这将是容易的部分，但在过去 3 个小时里一直在谷歌/堆栈溢出，但没有运气。

我有一个直截了当的 ng-repeat，我想列出我的 data2 中的所有内容，其中 ref_id 列与我的 data1 的唯一 ID 匹配。

data1: [ {id: 1, name: "Bob"}, {id: 2, name: "Diane"}, {id: 3, name: "Ross"}, {id: 4, name: "Jimbo"}, ];

data2: [ {ref_id: 1, Result: "Fries"}, {ref_id: 1, Result: "Burger"}, {ref_id: 7, Result: "Burger"}, {ref_id: 8, Result: "Nothing"}, ];

所以这就是我想出的：

<div ng-repeat="result in data2 | filter: { ref_id: data1.id }" > {{ result.Result }} </div>

它似乎忽略了我的过滤器，只是吐出所有东西。 所以我想它可能像我的过滤器中的数组一样，所以我创建了一个自定义过滤器：

<div ng-repeat="result in data2 | filter: Test()"  > {{ result.Result }} </div>

$scope.Test = function(item){

  return angular.forEach($scope.data1, function(value, key) {
    return value.id === item.ref_id;
  }

}

但这也根本行不通，它给了我未定义的变量，但我认为它就像我使用 function 的方式一样。 我只希望我的 ng-repeat 使用我的 ref_ID 列显示具有与 go 匹配的 ID 的项目。

有任何想法吗？

Answer 1

有两种方法可以实现您想要做的事情：

1.使用init方法

在 controller 的init方法中创建一个包含所需条目的列表（最好使用$onInit ），然后在ng-repeat中使用该列表

// inside the controller for your app
  $scope.data1 = [ {id: 1, name: "Bob"}, {id: 2, name: "Diane"}, {id: 3, name: "Ross"}, {id: 4, name: "Jimbo"}];

  $scope.data2 = [ {ref_id: 1, Result: "Fries"}, {ref_id: 1, Result: "Burger"}, {ref_id: 7, Result: "Burger"}, {ref_id: 8, Result: "Nothing"}];

  var init = function () {
    var idList = $scope.data1.map(function (item) {
      return item.id;    
    });
    $scope.filteredList = $scope.data2.filter(function (item) {
      return idList.includes(item.ref_id);
    });
  }
  init();
// end of controller

并认为：

<div ng-repeat="result in filteredList" > {{ result.Result }} </div>

2.制作自定义过滤器

angular.module('yourModuleName', []).filter('test', function() {
    return function(input, include, prop1, prop2) {
        if (!angular.isArray(input))
            return input;

        if (!angular.isArray(include))
            include = [];

        if (prop2) {
            // extracting 'id' from data1
            include = include.map(function byProp(item) {
                return item[prop2];
            });
        }
        return input.filter(function (item) {
          // checking if ref_id of current item is present in include, which is a list of ids from data1
          return include.includes(item[prop1])
        });
    };
});

• input是ng-repeat中使用的列表
• include , prop1和prop2对应调用过滤器时使用的参数

在视图中使用过滤器：

  <div ng-repeat="result in data2 | test:data1:'ref_id':'id'" > {{ result.Result }} </div>

• data2对应过滤器定义中的input
• include对应于通过过滤器发送的data1
• 'ref_id' (string) 对应于 prop1
• 'id' （字符串）对应于 prop2

我在这里选择了接受的答案并对其进行了修改以适合此用例。 希望这可以帮助。

这是一个 plnkr，包括上述两种情况的代码： https://plnkr.co/edit/GdvVZIhDbFTaVQPY

了解使用多个过滤器 arguments 的参考： 如何使用多个 arguments 调用 Angular.js 过滤器？

Answer 2

 $scope.Test = function(item){ var idList = $scope.data1.map(function (item) { return item.id; }); return $scope.data2.filter(function (item) { return idList.includes(item.ref_id); }); } });

 <div ng-repeat="result in Test()" > {{ result.Result }} </div>