Угловая фильтрация плоских массивов?

Question

Я пытаюсь фильтровать данные с помощью нескольких «тегов» против плоских массивов без успеха. Вот то, что я пытался сделать ...

$scope.activeFacets = { 
 
     elementFacets: ["link"], 
 
     containerFacets: ["section", "siderail"] 
 
    } 
 

 
    $scope.data[{ 
 
     "name": "Article Summary Large", 
 
     "partialName": "article-summary-large", 
 
     "isAngular": true, 
 
     "maxColumns": 4, 
 
     "relatedComponents": { 
 
     "elements": [ 
 
      "promo-image", 
 
      "link", 
 
      "button" 
 
     ], 
 
     "containers": [ 
 
      "section-box-right-extra", 
 
      "section-mixed" 
 
     ], 
 
     "purpose": [ 
 
      "styling-content", 
 
      "promotion" 
 
     ] 
 

 
     } 
 
    }, { 
 
     "name": "Article Summary Small", 
 
     "partialName": "article-summary-small", 
 
     "relatedComponents": { 
 
     "elements": [ 
 
      "thumbnail-image", 
 
      "link" 
 
     ] 
 
     } 
 
    }, { 
 
     "name": "Promo Thumb Medium", 
 
     "partialName": "promo-thumb-medium", 
 
     "isAngular": true, 
 
     "relatedComponents": { 
 
     "elements": [ 
 
      "promo-image", 
 
      "link" 
 
     ] 
 
     } 
 
    }]

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 

 
<div ng-app=""> 
 

 
    <ul> 
 
    <li ng-click="activeFacets.elementFacets.push('link')"/>Link</li> 
 
    <li ng-click="activeFacets.elementFacets.push('button')" />Button</li> 
 
    </ul> 
 

 
    <div ng-repeat="item in data | orderBy:'name' | filter:{relatedComponents.elements : activeFacets.elementFacets}"> 
 
    {{ item.name }} 
 
    <ul> 
 
     <li ng-repeat="comp in relatedComponents.elements"> 
 
     {{ comp }}</li> 
 
    </ul> 
 
    </div> 
 

 
</div>

Мой вопрос, как я могу либо изменить масштаб так, что это работает, или как я могу фильтровать данные, прежде чем руки?

Answer 1

@ Непрерывное решение вашего решения, но мне может потребоваться настроить элементы более конкретно по мере роста модели. Я получил это, чтобы работать в уродливой процедурной функции типа.

$scope.updateFilter = function(){ 
 

 
        $scope.filteredData = $scope.componentData; 
 

 
        var filteredElements = []; 
 
        var filteredContainers = []; 
 

 
        if($scope.activeFacets.elementFacets.length > 0 || $scope.activeFacets.containerFacets.length > 0){ 
 
         $scope.filteredData = []; 
 
        } 
 

 
        if ($scope.activeFacets.elementFacets.length > 0) { 
 
         for (var j = 0; j < $scope.componentData.length; j++) { 
 
          for (var i = 0; i < $scope.activeFacets.elementFacets.length; i++) { 
 
           if ($.inArray($scope.activeFacets.elementFacets[i], $scope.componentData[j].relatedElements) !== -1) { 
 
            filteredElements.push($scope.componentData[j]); 
 
           } 
 
          } 
 
         } 
 
        } 
 

 
        angular.extend($scope.filteredData, filteredElements); 
 

 
        if ($scope.activeFacets.containerFacets.length > 0) { 
 
         for (var j = 0; j < $scope.componentData.length; j++) { 
 
          for (var i = 0; i < $scope.activeFacets.containerFacets.length; i++) { 
 
           if ($.inArray($scope.activeFacets.containerFacets[i], $scope.componentData[j].relatedContainers) !== -1) { 
 
            if ($.inArray($scope.componentData[j], $scope.filteredData) === -1) { 
 
             filteredContainers.push($scope.componentData[j]); 
 
            } 
 
           } 
 
          } 
 
         } 
 
        } 
 

 
        angular.extend($scope.filteredData, filteredContainers); 
 
       } 
 

 
\t \t \t \t $scope.$watch('activeFacets', function() { 
 

 
        $scope.updateFilter(); 
 
\t \t \t \t \t 
 
\t \t   }, true);