2017-06-11 7 views
1

このフィルタが見つかりました。このフィルタを編集しようとしています。オプションを選択すると、他のオプションがグレーアウトされます。たとえば、(野菜)を選択した場合、 )。AngularJs Filter商品がない場合は、オプションを非表示にします

コードに書き出す方法はわかりませんが、私はそれのロジックです。 dynamicFilter関数では、フィルタオプションの数を更新する必要があります。また、1より小さい場合はクラスや何かを追加する必要があります。

ここで私のコードペンはどんな助けになるだろう素晴らしいです。

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> 

答えて

0

あなたのようなNG-ショー=として、あなたのフィルタに応じて条件を追加することができます "(製品|ユニークな '価格')。長さ> 0"

これを試してみてください
<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> 
関連する問題