角度平面阵列过滤？

Question

我正在尝试使用多个标签来过滤数据＆＃39;对阵平面阵列没有成功。这就是我一直想做的......

＆＃13;

＆＃13;

    $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"
        ]
      }
    }]

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我的问题是如何更改我的范围以便这样做，或者如何在手前过滤数据？

Answer 1

@Scott您的解决方案有效但我可能需要在模型增长时更具体地定位元素。我让它在一个丑陋的程序类型函数中工作。

＆＃13;

＆＃13;

$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);
                }

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

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

＆＃13;

＆＃13;

＆＃13;