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的值是表达式，那么它应该放在 {} 。
让它像开关盒一样。例如'要应用的类'：'条件'，带有分隔符号，如下所示..

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问题的知识来提出解决方案：

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>

<强> 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 Filter - 按3个复选框过滤

2 个答案: