我認為這將是容易的部分，但在過去 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;
}
}
但這也根本不起作用，它給了我未定義的變數，但我認為它不像我使用函式的方式。我只想讓我的 ng-repeat 顯示與我的 ref_ID 列匹配的 ID 的專案。
有任何想法嗎？
uj5u.com熱心網友回復：
有兩種方法可以實作您想要做的事情：
1.使用init方法
在控制器的方法中創建一個包含所需條目的串列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-repeatinclude，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
了解使用多個過濾器引數的參考：如何使用多個引數呼叫 Angular.js 過濾器？
uj5u.com熱心網友回復：
$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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/507806.html
上一篇：IFC.js顯示/隱藏圖層和組件