Угловая нг-повтор пользовательских фильтров 2 jsons

Question

мне нужно перечислить в таблице 2 jsons зависят друг от друга

первый JSon "имена":

[ 
     { 
      "name": "AAAAAA", 
      "down": "False" 

     }, 

     { 
      "name": "BBBBBB", 
      "down": "45%" 
     }, 
     { 
      "name": "CCCCC", 
      "down": "12%" 
     } 
] 

второй JSON "Данные":

[ 
     { 
      "data": "AAAAAA" 
     } 
] 

Js файл:

app.service('service', function($http, $q) { 
    this.getNames = function() { 
     var datas = $http.get('datas.json', { 
      cache: false 
     }); 
     var names = $http.get('names.json', { 
      cache: false 
     }); 
     return $q.all([datas, names]); 
    }; 
}); 

app.controller('FirstCtrl', function($scope, service) { 
      var promise = service.getNames(); 
      promise.then(function(data) { 
       $scope.names = data.names.data; 
       $scope.datas = data.datas.data; 
      }) 
      .filter('quefilter', function() { 
       return function(data) { 
        var filterque = []; 
        angular.forEach(data, function(item) { 
         if (datas[0].data == item.name) { 
         filterque.push(item); 
         } else if (datas[0].data != item.name) { 
         filterque.push("err"); 
         } 
        }); 

        return filterque; 
       }; 
      }); 

HTML фил е:

<table> 
    <tbody> 
     <tr ng-repeat="name in names"> 
     <td>{{name.name}}</td> 
     <td>{{name.down}}</td> 
     <td>{{datas[0].data | quefilter}}</td> 
     </tr> 
    </tbody> 
</table> 

Так я пытаюсь сделать пользовательский фильтр, который выведен список только {{datas[0].data}} рядом с тем же именем из {{names.name}}. В моей таблице должно быть AAAAAA рядом с AAAAAA. Но мой код не работал. Спасибо за советы и ответы заранее!

Answer 1

Вы можете сделать это следующим образом: я добавил fiddle уточнить

<div ng-controller="MyCtrl"> 
    <table> 
     <tbody> 
      <tr ng-repeat="name in names"> 
      <td>{{name.name}}</td> 
      <td>{{name.down}}</td> 
      <td ng-repeat="record in datas | filter:{data: name.name}"> 
       {{record.data}} 
      </td> 

      </tr> 
     </tbody> 
     </table> 
</div> 

Answer 2

Фильтр:

.filter('myFilter', function() { 

    return function(input, param) { 

    var output; 

    output = data.map((val) => { 
     if (data.name == param) return val; 
    }) 

    return output; 

    } 

На ваш взгляд:

<table> 
    <tbody> 
     <tr ng-repeat="name in names | myFilter(datas[0].data)"> 
     <td>{{name.name}}</td> 
     <td>{{name.down}}</td> 
     </tr> 
    </tbody> 
</table> 

Answer 3

Если вы знаете, что только один элемент из данных будет соответствовать элементу в именах, используйте find https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/find

В вашем случае добавить эту функцию в рамках

$scope.getTheRightData = name => $scope.datas.map(d=>d.data).find(d=>d===name);

и использовать его

<td ng-bind="getTheRightData(name.name)"></td> 

http://jsfiddle.net/elrasco/34f5Lzgd/6/