AngularJS - 带有数字/长度的过滤复选框

Posted 2023-03-27

【中文标题】AngularJS - 带有数字/长度的过滤复选框

【英文标题】：AngularJS - Filter checkbox with numbers/length

【发布时间】：2018-12-21 18:02:14

【问题描述】：

我有一个搜索各种门票的应用程序。 在边栏中，我有一些过滤器，因此用户可以过滤他们的结果（这些包括复选框和单选按钮，如 eBay/Amazon 等）。

所以它在侧边栏中看起来与此类似：

如何购买

直接借记 (10) 现金（2）

所以用户一眼就知道，如果他们点击直接借记，它将返回 10 个结果。然后我遇到的问题是，当用户点击直接借记时，单选按钮会变成这个......

如何购买

直接借记 (10) 现金 (0)

如果它是一个复选框，这将是正确的，因为单击直接借记和现金将返回 0 个结果。然而，在这种情况下（单选按钮），如果用户点击 Cash，他们仍然应该看到有 2 个结果。

这是我的代码...

html

<ul class="checkbox-list nga-fast nga-collapse" data-ng-show="ticketing.filterButtons.OperatorBtn">
  <li data-ng-repeat="filter in ticketing.filterButtons.Operator | orderBy: filter" data-ng-if="filter != null">
    <input id="operator$index" name="operator$index" type="radio" class="stylized" data-ng-model="ticketing.searchFilters.Operator" data-ng-change="ticketing.update()" value="filter" />
    <label for="operator$index">filter 
      ( (ticketing.filteredTickets | filter: Operator: filter).length)
    </label>
  </li>
</ul>

JS

function update() 
  var filtered = vm.all;
  console.log(vm.searchFilters);
  // For each filter in the search filters loop through and delete any that state false, this is so it doesn't explicitly match false and shows everything.
  angular.forEach(vm.searchFilters, function(val, key) 
    // if Key/Property contains 'Allow" and the value is true || if Key/Property doesn't contain 'Allow' and val is false (this is to make sure the oppposite/exclude filter values are deleted as the trues will be falses and vice versa)
    if ((key.indexOf('Allow') !== -1 && val) || (val == false && key.indexOf('Allow') === -1)) 
      // Delete the filter and value
      delete vm.searchFilters[key];
    
  );

  // Filter results by the filters selected
  filtered = $filter('filter')(filtered, vm.searchFilters);

  // Sort results by selected option
  vm.filteredTickets = $filter('orderBy')(filtered, vm.orderBy);

  console.log(vm.filteredTickets);
  console.log(vm.searchFilters);

  vm.updateGrid();

如果您需要更多信息或代码，请告诉我，我会提供。

【问题讨论】：

你能提供任何演示吗？

我会参数化（甚至是一个词？）输入类型，并在您的过滤器中使用该类型来确定如何过滤您的数据集。

【参考方案1】：

这是一个猜测。下面一行可能有问题

     ( (ticketing.filteredTickets | filter:  Operator:filter).length)           

点击Direct Debit";，您可能已经更新了“ticketing.filteredTickets”，只有“直接借记”的数据，因此没有“现金”的数据