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>