我们如何使用带有多选复选框的 angularjs 实现产品过滤页面？

Question

我创建了一个表格页面，在该页面中我需要使用不同类别但具有多选选项的左侧构面框来过滤表格，并且我需要使用 Angularjs 来满足此要求。

我需要使用清除过滤器选择来选中/取消选中。

任何帮助库都可以帮助实现相同的目标，或者我们需要围绕复选框做一些逻辑来实现这一点。

我的复选框代码如下所示：

 <div class="col-sm-2" style="padding-top: 10px; padding-bottom: 20px;">
                <div class="facetBx sltBx" ng-show="tabFilters.length > 0">
                    <p class="facetBxTitle"><i class="fa fa-filter"></i>&nbsp;Filter Selection
                        <a class="clrSlt" ng-click="clearAllFilters();">Clear</a>
                    </p>

                    <div class="facetBxChld" id="uRslctn">

                        <ul>
                            <li ng-repeat="item in tabFilters">

                                <div class="crop">
                                    <strong title="{{item}}">{{item}}</strong>
                                </div>
                                <i class="fa fa-remove rmvThs" style="font-size: 14px;color:#000;float: right;" ng-click="checkItem(item, item,false);"></i>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="facetBx" ng-repeat="item in filters">
                    <p class="facetBxTitle bomtype">{{item.label}}</p>

                    <div class="facetBxChld" id="bomFacet">
                        <ul class="multiselect" style="max-height: 140px;overflow-y: auto;">
                            <li ng-repeat="(k,v) in item.values">
                                <input type="checkbox" ng-model='isSelected' ng-click='checkItem(item.name, k, isSelected)'>
                                <span> {{k}} ({{v}})</span>
                            </li>
                            <li ng-show="value.length == 0">
                                No Data Available.
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

以下网站是我正在尝试构建的代码的参考：

www.jabong.com

UI(HTML) 已完成，但我在维护未清除的复选框的检查和取消选中时遇到了麻烦。

我相信我需要在复选框的 ng-model 中编写一些代码来实现它，但我无法成功，因此需要同样的帮助。

同样的 Plunkur 示例：

enter link description here

提前致谢。

Answer 1

基本上，您需要在$scope 中跟踪具有某些属性的复选框的ng-model。我通过修改您的 $scope.filters 并在其中添加 selected 属性来做到这一点，如下所示。

var filters = [{
  label: 'Brand',
  name: 'brand',
  values: {
    Blackberrys: 503,
    Arrow: 175,
    ParkAvenue: 358
  }
}, {
  label: 'Color',
  name: 'color',
  values: {
    Black: 100,
    Green: 200,
    Red: 300
  }
}]

function loadFilters() {
  $scope.filters = filters.map(function(filter) {
    var filter = angular.copy(filter);
    for (var key in filter.values) {
      filter.values[key] = {
        selected: false,
        count: filter.values[key]
      }
    }
    return filter;
  })
}

loadFilters();

然后，您可以随时致电loadFilters() 清除所有过滤器。请参阅下面的 POC。

https://plnkr.co/edit/SADPoUpftnJkg1rMuSB9?p=preview

Answer 2

您应该在复选框上尝试“ng-change”以触发根据选中和未选中复选框更改值的方法。

例如

<input type="checkbox" ng-model='isSelected' ng-click='checkItem(key, k, isSelected)' ng-change="yourMethodHere()">

在 JS 中：

$scope.yourMethodHere = function() {
  if (isSelected) {
    // filter the values here
  } else {
    // non filtered values
  }
}

通过这样做，您甚至不需要维护退出选中/未选中复选框的值。