Question

我有一个表格，其行显示为ng-repeat。我还有一个<select>。我的表格行按属性进行过滤，在<select>中选中。这是代码：

控制器：

$scope.transactionTypes = [
  "All",
  "Bonus received",
  "Invoice payment",
  "Taxes",
  "Credit transfers",
  "Withdrawals",
  "Cancelled transactions"
];

$scope.tableFilter = {};

$scope.transactions = [
   {
      "transactionType" : "Taxes"
   },
   {
      "transactionType" : "Bonus received"
   }
]

HTML：

<select ng-model="tableFilter.transactionType"
        ng-options="transactionType for transactionType in transactionTypes">
</select>

<table>
    <tr ng-repeat="item in (transactions | filter:{transactionType:tableFilter.transactionType)">
       <td>{{item.transactionType}}</td>
    </tr>
</table>

我尽可能地简化了我的代码。我希望我能够清楚地描述我的情况。

我的问题是：当我在<select>中选择“全部”属性时，显示所有交易（使用任何transactionType）的最简单方法是什么？如何在<select>中选择“全部”来清除此过滤器？

感谢。

Answer 1

如果transactionType为'All'，则将transactionType的值设置为''，并且不会应用任何过滤器。

<select ng-model="tableFilter.transactionType" ng-options="'All' == transactionType ? '' : transactionType as transactionType for transactionType in transactionTypes"></select>

Answer 2

 <tr ng-repeat="item in (transactions | filter:tableFilter.transactionType:checkForAll">
       <td>{{item.transactionType}}</td>
 </tr>


$scope.checkForAll = function(option, currentValue)
{
 if(currentValue == $scope.transactionTypes[0])
    return true;
 else
    return option == currentValue;    
}

试试。

Answer 3

您可以编写一个自定义过滤器，可以将变量绑定到＆＃34;全选＆＃34;。

此处提供更多信息：https://docs.angularjs.org/guide/filter

如果这不能解决您的问题，我也可以提供一个例子。

Answer 4

我使用下面的工作。可能有更好的解决方案......

的index.html：

<!doctype html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body ng-controller="ctrl">


    <select ng-model="tableFilter.transactionType"
        ng-options="transactionType for transactionType in transactionTypes">
    </select>

    <table>
        <tr ng-repeat="item in (transactions | filter:myFilter)">
           <td>{{item.transactionType}}</td>
        </tr>

    </table>

    <script src= "angular.js"></script>
    <script src= "app.js"></script>
</body>
</html>

app.js：

var app = angular.module('app', []);

app.controller('ctrl', function($scope) {
    $scope.transactionTypes = [
      "All",
      "Bonus received",
      "Invoice payment",
      "Taxes",
      "Credit transfers",
      "Withdrawals",
      "Cancelled transactions"
    ];

    $scope.useFilter = false;

    $scope.tableFilter = {};

    $scope.transactions = [
       {
          "transactionType" : "Taxes"
       },
       {
          "transactionType" : "Bonus received"
       }
    ];

    $scope.myFilter = function(tran) {
        //debugger;
        if ($scope.tableFilter.transactionType == "All" || !$scope.tableFilter.transactionType)
            return true;
        else if($scope.tableFilter.transactionType == tran.transactionType)
            return true;
        else
            return false;
    }
});

Answer 5

您可以将all的fitter设置为空字符串''。当选择all时，过滤器将被设置为空字符串，这将使整个事务可见。

您的自定义过滤器看起来很好。

AngularJS。按选择框筛选表格行

5 个答案: