공유 데이터를 각도로 필터링하기

Question

나는 부울에 의해 제어 될 수있는 공장에서 데이터를 필터링하려고합니다. 나는 내가 뭘 잘못하고 있는지 알 수 없다. 그것은 신빙성있게 문법이고 나 자신은 앵글 권리를 이해하지 못합니다. 그러나 나는 여기에 얼어 붙었다. 그리고 과거를 지나갈 수 없다. 제품 목록을 보여 주며 ng-repeat 지시문과 사용자 정의 필터를 통해 필터링합니다.

<div ng-controller="prodCtrl"> 
    <md-input-container class="md-icon-float md-icon-right md-block"> 
     <label>Low Price</label> 
     <md-icon md-font-icon="fa fa-money"></md-icon> 
     <input ng-model="filterData.price.low" type="number" step="5"> 
     <md-icon md-svg-src="img/icons/ic_euro_24px.svg"></md-icon> 
    </md-input-container> 
    <md-input-container class="md-icon-float md-icon-right md-block"> 
     <label>High Price</label> 
     <md-icon md-font-icon="fa fa-money"></md-icon> 
     <input ng-model="filterData.price.high" type="number" step="5"> 
     <md-icon md-svg-src="img/icons/ic_euro_24px.svg"></md-icon> 
    </md-input-container> 
    <md-checkbox style="margin-left: 15px;" class="md-secondary" ng-model="filterData.topChoices[0].selected"> Show Promotions <br><span style="font-size: 10px; color: blue;" ng-if="filterData.topChoices[0].selected">selected</span> </md-checkbox> 
    <md-checkbox style="margin-left: 15px;" class="md-secondary" ng-model="filterData.topChoices[1].selected"> Show Hot Sellers<br><span style="font-size: 10px; color: blue;" ng-if="filterData.topChoices[1].selected">selected</span> </md-checkbox> 
    <md-checkbox style="margin-left: 15px;" class="md-secondary" ng-model="filterData.topChoices[2].selected"> Show Free Shipping<br><span style="font-size: 10px; color: blue;" ng-if="filterData.topChoices[2].selected">selected</span> </md-checkbox> 
    </div> 
    <md-subheader class="md-no-sticky">Avatar with Secondary Action Icon</md-subheader> 
<md-list ng-Controller="prodCtrl"> 
    <md-list-item ng-repeat="product in products | filter:promos" ng-click class="noright"> 
    <ul> 
     <h3>{{product.name}} </h3> 
     <p>{{product.desc}}</p> 
    </ul> 
    <ul class="md-secondary"> 
     <li style="list-style: none;" ng-if="product.onPromotion">On Promotion!</li> 
     <li style="list-style: none;" ng-if="product.hotSeller">Hot-Seller!</li> 
     <li style="list-style: none;" ng-if="product.freeShip">Free Shipping!</li> 
    </ul> 
    <ul class="md-secondary" style="margin-right: 25px;"> 
     <li style="list-style: none;" ng-repeat="item in product.sellers | orderBy: item.price"> 
      {{item.seller}} ${{item.price}}</li> 
    </ul> 
    <md-button class="md-raised md-primary md-secondary">Buy</md-button> 
    </md-list-item> 
</md-list> 

하는 것은 올바른 방향으로 나를 넣어 도와주세요 : & 공장이 plunker [여기 http://plnkr.co/edit/EDZPOPh7iMFSpPjO6AkI?p=preview][1] 에서 볼 수 있습니다

.filter('promos'[ 
    '$scope', '$http', 'FilterData', 'ProductData', function(
    $scope, $http, FilterData, ProductData){ 
    $scope.filterData = FilterData; 
    $scope.products = ProductData; 

    angular.forEach(products, function(product){ 
     var promoProducts = []; 
     //booleen filters- if all or none selected do nothing - full product list 
     if ($scope.filterData.topChoices[0].selected &&  $scope.filterData.topChoices[1].selected && $scope.filterData.topChoices[2].selected || $scope.filterData.topChoices[0].selected === false && $scope.filterData.topChoices[1].selected === false && $scope.filterData.topChoices[2].selected === false) {} 
     else { 
     //if option selects, show corresponding products 
     if ($scope.filterData.topChoices[0].selected && product.onPromotion) {promoProducts.push} 
     if ($scope.filterData.topChoices[1].selected && product.hotSeller) {promoProducts.push} 
     if ($scope.filterData.topChoices[2].selected && product.freeShip) {promoProducts.push} 
     return promoProducts; 
     } 
    }); 
}]) 

컨트롤러는 HTML입니다. 나는 또한지도에서 제품 데이터를 사용하기 때문에 공장을 생산하고있다. 그래서 이것이 최선의 방법이라고 생각합니다.

Answer 1

이

제거 코드를 필터링하면 내부에 갈 것입니다 $ HTTP 및 heres는 필터 에서 $ 범위 종속성 fiddle

var pusher = function(main, toPush) { 
       var alreadyPresent = false; 
       angular.forEach(main, function(toCheck) { 
       if (toCheck === toPush) { 
        alreadyPresent = true; 

       } 
       }) 
       if (!alreadyPresent) { 
       main.push(toPush); 
       } 
      } 



      var p = []; 
      angular.forEach(products, function(product) { 
       if (FilterData.topChoices[0].selected && 
       FilterData.topChoices[1].selected && FilterData.topChoices[2].selected || FilterData.topChoices[0].selected === false && FilterData.topChoices[1].selected === false && FilterData.topChoices[2].selected === false) {} else { 
       //if 
       if (FilterData.topChoices[0].selected && product.onPromotion) { 
        pusher(p, product); 
       } 
       if (FilterData.topChoices[1].selected && product.hotSeller) { 
        pusher(p, product); 
       } 
       if (FilterData.topChoices[2].selected && product.freeShip) { 
        pusher(p, product); 
       } 
       console.log('ppp') 
       console.log(p); 
       console.log('--ppp') 


       } 
      }) 
      return p; 

및 필터를 사용하여 작업 할

<md-list-item ng-repeat="product in products | promo" ng-click class="noright">