AngularJs Filter ausblenden Optionen, wenn keine Produkte

Question

Ich habe diesen Filter gefunden und ich versuche, es zu bearbeiten, so dass Sie eine Option auswählen, dann Graustufen die andere Option Zum Beispiel wenn Sie (Gemüse) wählen, können Sie nur auswählen (Orange).

Ich bin nicht sicher, wie man es in Code herausstellt, aber ich die Logik dafür. Auf der Funktion dynamicFilter muss die Anzahl der Filteroptionen aktualisiert werden und wenn weniger als 1 eine Klasse oder etwas hinzufügen muss.

Hier ist mein Code Stift jede Hilfe wäre genial.

https://codepen.io/natedog213/pen/mwPxmy

<div ng-app='angularDemo' ng-cloak> 
    <md-toolbar layout-padding> 
    <h2>Filtering with Angular Filters</h2> 
    </md-toolbar> 
    <div layout="row" ng-controller="angularController as ctrl"> 

     <div flex="20" class="sidebar" layout-padding> 

      <!-- Repeat the filter types and there options --> 
      <div ng-repeat="filter in Filters"> 
       <h3>{{filter.name}}</h3> 
       <ul class="filteroptions"> 
        <li ng-repeat="option in filter.options"> 
         <input id="{{option.value}}" class="filter_option" type="checkbox" data-name="{{option.value}}" ng-model="option.IsIncluded" ng-checked="option.IsIncluded"> 
         <label for="{{option.value}}">{{option.value}}</label> 
        </li> 
       </ul> 
      </div> 

     </div> 

     <div flex="50" layout="row"> 
      <div flex ng-repeat="product in products | dynamicFilter:Filters:this" class="product"> 
       {{product.name}} 
      </div> 
     </div> 

    </div> 
</div> 

Answer 1

können Sie Bedingung hinzufügen, nach Ihren Filter wie als ng-show = "(Produkte | einzigartig: 'Preis') Länge> 0."

Versuchen Sie, diese

<div class="side_menu"> 

    <h2>Product Types</h2> 

    <div data-ng-repeat="product in products | unique:'type'"> 
     <input id="{{product.type}}" type="checkbox" ng-model="search.type" ng-true-value="'{{product.type}}'" ng-false-value='' /><label for="{{ product.type }}">{{ product.type }} </label> 
    </div> 


    <br> 
    <h2 ng-show="(products | unique:'price').length > 0">Product Price</h2> 
    <div data-ng-repeat="product in products | unique:'price'"> 
     <input id="{{product.price}}" type="checkbox" ng-model="search.type1" ng-true-value="'{{product.price}}'" ng-false-value='' /><label for="{{ product.price }}">{{ product.price }} </label> 
    </div> 


</div>