Angular JS 过滤器 - 按 3 个复选框过滤答案

【问题标题】：Angular JS Filter - Filter by 3 checkboxesAngular JS 过滤器 - 按 3 个复选框过滤
【发布时间】：2016-05-18 16:59:28
【问题描述】：

我有一个销售数组，我想按销售操作的状态（已完成、待处理或/和失败）进行过滤。我正在尝试的是显示整个列表，并取消选中某些行的复选框。

HTML 代码

<div class="row" ng-repeat="sale in salesArray  | filter: okStatus | filter: pendingStatus | filter: failedStatus">
    <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
       <i ng-class="'icon ' + sale.icon + ( sale.status == 'ok' ? ' text-green' : (sale.status == 'pending' ? ' text-amber' : ' text-red') )"></i>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
       <|sale.user|>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
       <|sale.product|>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
       <|sale.price | currency:"$"|>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
       <|sale.date|>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
    </div>
</div>
<ul class="justified-list">
   <li>
      <div class="checkboxer checkboxer-green form-inline">
          <input type="checkbox" id="checkboxColor10" ng-model="okStatus" ng-value="ok">
           <label for="checkboxColor10">Finalizados (<|(salesArray | filter: {status: 'ok'}).length|>)</label>
        </div>
    </li>
    <li>
        <div class="checkboxer checkboxer-amber form-inline">
            <input type="checkbox" id="checkboxColor14" ng-model="pendingStatus" ng-value="pending">
            <label for="checkboxColor14">En proceso (<|(salesArray | filter: {status: 'pending'}).length|>)</label>
        </div>
    </li>
    <li>
       <div class="checkboxer checkboxer-red form-inline">
            <input type="checkbox" id="checkboxColor1" ng-model="failedStatus" ng-value="failed">
           <label for="checkboxColor1">Abortados (<|(salesArray | filter: {status: 'failed'}).length|>)</label>
       </div>
    </li>
</ul>

控制器代码：

$scope.okStatus = "";
$scope.pendingStatus = "";
$scope.failedStatus = "";
$scope.salesArray = [
    {icon: "ion-checkmark-round", user: "Jtd", price: 123.32, product: "Sesión de una hora", date: "12/02/2015", status: "ok"},
    {icon: "ion-close-round", user: "Tar", price: 53.00, product: "Sesión de media hora", date: "14/02/2016", status: "failed"},
    {icon: "ion-compass", user: "Rao", price: 103.90, product: "Sesión de 45 minutos", date: "15/03/2016", status: "pending"}
];

我怎样才能得到这个过滤器？现在很明显它不起作用

【问题讨论】：

请点击此处：plnkr.co/edit/DtltSCw7wSI85wpJ9z8J?p=preview
看到这个答案：stackoverflow.com/questions/24191265/…

标签： javascript angularjs

【解决方案1】：

我结合了其他几个 SO 问题的知识来提出解决方案：

Bind all checkboxes to a single model
使用custom filter 根据复选框模型过滤销售额

解决方案可以是这样的（最好看plunkr）：

HTML

  <body ng-app="app" ng-controller="ctrl">
    <label ng-repeat="status in statuses">
  <input
    type="checkbox"
    name="selectedStatuses[]"
    value="{{status}}"
    ng-checked="selection.indexOf(status) > -1"
    ng-click="toggleSelection(status)"
  > {{status}}
</label>

<div ng-repeat="sale in salesArray | selectedFilter:selection">{{ sale.user }} | {{sale.product}} | {{sale.status}}</div>
  </body>

app = angular.module('app', []);
app.filter('selectedFilter', function() {
  return function(items, options) {
    var filtered = [];
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      if (options.indexOf(item.status) != -1) {
        filtered.push(item);
      }
    }
    return filtered;
  };
});
app.controller('ctrl', ['$scope', function($scope) {
  $scope.statuses = ['ok', 'pending', 'failed'];

  $scope.selection = ['ok', 'pending', 'failed'];

  // toggle selection for a given fruit by name
  $scope.toggleSelection = function toggleSelection(status) {
    var idx = $scope.selection.indexOf(status);

    // is currently selected
    if (idx > -1) {
      $scope.selection.splice(idx, 1);
    }

    // is newly selected
    else {
      $scope.selection.push(status);
    }
  };

  $scope.salesArray = [{
    icon: "ion-checkmark-round",
    user: "Jtd",
    price: 123.32,
    product: "Sesión de una hora",
    date: "12/02/2015",
    status: "ok"
  }, {
    icon: "ion-close-round",
    user: "Tar",
    price: 53.00,
    product: "Sesión de media hora",
    date: "14/02/2016",
    status: "failed"
  }, {
    icon: "ion-compass",
    user: "Rao",
    price: 103.90,
    product: "Sesión de 45 minutos",
    date: "15/03/2016",
    status: "pending"
  }];


}]);

【讨论】：

plunkr 工作正常，非常适合。你是最好的！我希望我有你的知识！非常感谢
我很高兴它有帮助！是recommended to mark an answer as accepted（如果它确实是最有帮助的）。
我添加到我的代码中，但它反向工作，我更改了 ng-checked 语句，现在它运行完美！非常感谢！

【解决方案2】：

如果 ng-class 的值是表达式，那么它应该放在 {}。
让它像开关盒一样。例如 'class to be applied':'the condition' 用逗号分隔，如下所示..

HTML 代码：

<i ng-class="{'text-green':(sale.status == 'ok'),'
 text-amber':(sale.status == 'pending'), 'text-red':(sale.status != 'pending')}"></i>

可以将逻辑写在函数中，调用方法类似于下面。确保根据需要构建返回结构。

HTML 代码：

<i ng-class="getDisplayClass(sale.icon, sale.status)"></i>

控制器代码：

$scope.getDisplayClass = function(saleicon, status) {
if (status == 'ok')
    return 'icon' + saleicon + 'text-green';
else if (status == 'pending')
    return 'icon' + saleicon + 'icon text-amber';
else 
    return 'icon' + saleicon + 'icon text-red';
}

【讨论】：