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

Question

我有一个销售阵列，我想按销售动作的状态（完成，挂起或/和失败）进行过滤。 我正在尝试显示整个列表，并且取消选中某些行将消失的复选框。

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"}
];

如何获得此过滤器？ 很明显现在不起作用

Answer 1

如果ng-class的值是expression，则应放置{} 。
使其像开关盒一样。 例如， “要应用的类”：“条件”，用逗号分隔，如下所示。

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';
}

Answer 2

我结合了其他一些SO问题的知识以提出解决方案：

将所有复选框绑定到一个模型
使用自定义过滤器根据复选框模型过滤销售

解决方案如下所示（最好看一下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>

JS

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"
  }];


}]);

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

问题描述

2 个解决方案

解决方案1
0 2016-05-18 17:17:42

解决方案2
0 已采纳 2016-05-18 18:46:32

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

问题描述

2 个解决方案

解决方案1 0 2016-05-18 17:17:42

解决方案2 0 已采纳 2016-05-18 18:46:32

解决方案1
0 2016-05-18 17:17:42

解决方案2
0 已采纳 2016-05-18 18:46:32