Pensé que esta iba a ser la parte fácil, pero he estado pasando por el desbordamiento de google/stack durante las últimas 3 horas sin suerte.
Tengo una repetición ng directa donde quiero enumerar todo en mi data2 donde la columna ref_id coincide con la ID única de mi data1.
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"}, ];Así que esto es lo que se me ocurrió:
<div ng-repeat="result in data2 | filter: { ref_id: data1.id }" > {{ result.Result }} </div>Parece estar ignorando mi filtro y simplemente escupiendo todo. Así que pensé que tal vez no le gustaba la matriz en mi filtro, así que creé un filtro personalizado:
<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; } }Pero esto simplemente tampoco funciona, me da variables indefinidas, pero creo que no me gusta la forma en que uso la función. Solo quiero que mi ng-repeat muestre elementos que tienen una ID coincidente para ir con mi columna ref_ID.
¿Algunas ideas?
Hay dos formas de lograr lo que estás tratando de hacer:
init Crear una lista con las entradas requeridas en el método init del controlador (es mejor usar $onInit ), y luego usar esa lista en 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 controllerY a la vista:
<div ng-repeat="result in filteredList" > {{ result.Result }} </div> 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 es la lista utilizada en ng-repeatinclude , prop1 y prop2 corresponden a los parámetros utilizados al llamar al filtroUsando el filtro a la vista:
<div ng-repeat="result in data2 | test:data1:'ref_id':'id'" > {{ result.Result }} </div>data2 corresponde a input en la definición del filtroinclude corresponde a data1 lo envió a través del filtro'ref_id' (cadena) corresponde a prop1'id' (cadena) corresponde a prop2Elegí la respuesta aceptada aquí y la modifiqué para que se ajuste a este caso de uso. Espero que esto ayude.
Aquí hay un plnkr que incluye código para los dos casos anteriores: https://plnkr.co/edit/GdvVZIhDbFTaVQPY
Referencia para comprender el uso de múltiples argumentos de filtro: ¿Cómo llamo a un filtro Angular.js con múltiples argumentos?
$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>