2017-06-11 43 views
1

我找到了这个过滤器,我试图编辑它,让你选择一个选项,然后它灰色的另一个选项例如,如果你选择(蔬菜),你只能选择(橙)。AngularJs过滤器隐藏选项,如果没有产品

我不知道如何将它转换成代码,但我的逻辑。在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> 
相关问题