Пользовательская фильтрация общих данных в Angular

Я пытаюсь отфильтровать данные с фабрики, которой можно управлять с помощью логических значений. Я не могу понять, что я делаю неправильно. Вероятно, это синтаксис, и я не понимаю угловой правильно. но я застрял здесь на какое-то время и не могу пройти. Я показываю список продуктов и фильтрую его с помощью директивы ng-repeat и пользовательского фильтра.

.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;
       }
     });
}])

Контроллер и фабрики можно увидеть в плункере [http://plnkr.co/edit/EDZPOPh7iMFSpPjO6AkI?p=preview][1] Вот html:

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

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


person Dennis Pitt    schedule 18.08.2016    source источник
comment
Вот рабочая вилка планка. Сообщите мне, если вы не понимаете ссылка   -  person Kaushal Niraula    schedule 18.08.2016
comment
Вот это да. этот толкатель действительно сделал свое дело. Я понимаю логику. Спасибо за помощь!   -  person Dennis Pitt    schedule 19.08.2016
comment
Я опубликую это в разделе ответов, можете ли вы пометить это как ответ?   -  person Kaushal Niraula    schedule 19.08.2016


Ответы (1)


Это войдет в ваш код фильтра

удалите зависимости $http и $scope из фильтра, вот рабочая скрипта

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;

и использовать фильтр do

<md-list-item ng-repeat="product in products | promo" ng-click class="noright">
person Kaushal Niraula    schedule 18.08.2016
comment
Отлично. Я не пытаюсь получить доступ к отфильтрованным данным через контроллер (мне нужно применить фильтр для сопоставления данных в листовке позже), поэтому какие-либо советы о том, как я могу заставить зеленый цвет соответствовать красному без использования директивы? plnkr.co/edit/HwNGFRuENleiSwVFfnhv?p=preview - person Dennis Pitt; 20.08.2016
comment
Конечно, я могу помочь вам с этим после выходных - person Kaushal Niraula; 20.08.2016
comment
Я смог получить его с помощью $rooscope.emit - person Dennis Pitt; 23.09.2016