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

用户界面（HTML）已完成，但我在维护检查和取消选中未清除的复选框方面遇到了麻烦。

我相信我需要在复选框的ng模型中编写代码以实现它，但我无法成功，所以需要相同的帮助。

样本Plunkur相同：

enter link description here

提前致谢。

Answer 1

您应该在复选框上尝试' 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
  }
}

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

Answer 2

基本上，您需要跟踪ng-model中包含某些属性的$scope个复选框。我通过修改您的$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

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

2 个答案: