AngularJS电子商务过滤器订购

时间:2014-10-02 14:00:15

标签: angularjs e-commerce

我正在使用AngularJS构建的电子商务网站上工作。该站点从JSON文件中获取产品数据以填充所有内容,包括类别页面上的过滤器。

请参阅下面的示例(使用虚拟数据)

BRAND
Brand A
Brand B
Brand C
Brand D

COLOUR
Red
Green
Purple
Yellow

FLOWERING TIME
8 weeks
10 weeks
7 weeks
9 weeks

我们尝试做的是按字母顺序排序每个过滤器,但如果我使用Angular的订单按品牌排序结果,它实际上按品牌订购产品,因此品牌A的产品在其他过滤器中也会始终显示品牌B的产品。

假设P1为品牌A,颜色为黄色,P2为品牌B,颜色为红色。然后,品牌的过滤器列表将正确排序,品牌A后跟品牌B,但颜色的过滤器列表将出错,黄色高于红色(因为品牌A始终位于顶部)。

问题在于订购是由产品完成的,而不是输出的实际匹配结果。

希望这是有道理的,如果有人能帮助解决这个问题,我将非常感激!

编辑:已添加代码

这是循环遍历不同类型的过滤器然后通过产品获取匹配过滤条件的代码。

<section data-ng-repeat="(filter, array) in filters" class="widget widget-filter-multiselect" data-ng-class="{ long: array.length > 9 }">
    <h3 class="widget-title">{{ filter }}</h3>
    <div class="search-filter" data-ng-show="array.length > 9">
        <input placeholder="Search {{ filter }}..." type="text" data-ng-model="search"/>
    </div>
    <!-- /.search-filter -->
    <ul class="checklist">
        <li data-ng-repeat="item in array | filter: search">
            <a data-ng-class="{ active: checkActive(filter, item) }" data-ng-click="toggleFilter(filter, item); buildPath()">
                <i class="unchecked fa fa-square-o"></i>
                <i class="checked fa fa-check-square"></i>
                <span data-ng-bind-html="item | highlightfilter:search"></span>
            </a>
        </li>
    </ul>
</section>

控制器是一个绝对的庞然大物,所以我不确定它放在哪里?

0 个答案:

没有答案