Question

我找到了这个过滤器，我试图编辑它，以便你选择一个选项，然后它会使另一个选项变灰。例如，如果你选择（蔬菜），你只能选择（橙色）。

我不确定如何将其输入代码，但我是它的逻辑。在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>

Answer 1

您可以根据您的过滤条件添加条件，例如ng-show =＆＃34;（产品|唯一：＆＃39;价格＆＃39;）。长度＆gt; 0＆＃34;

试试这个

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

如果没有产品，AngularJs Filter隐藏选项

1 个答案: