Question

如何设置特定搜索条件，例如：search.date > someDate()或search.amount > 0

我已经尝试过：<a href="#" ng-click="search.amount = x > 0">Pos only</a>等等。

我目前有一个输入：
<input type="text" class="form-control" placeholder="Search all" ng-model="search" /> 这很好用，搜索所有领域。当我尝试在搜索输入中放置[object Object]的特定过滤器时，它会中断。

<tr ng-repeat="tenant in tenants | filter:search | orderBy:sort" >
  <td>{{tenant.rent | currency: "€&nbsp;"}}</td>
  <td>{{tenant.name}}</td>
  <td>{{tenant.tel}}</td>
  <td><a href="mailto:{{tenant.mail}}">{{tenant.mail}}</a></td>
  <td>{{tenant.amount }}</td>
  <td>{{tenant.date}}</td>
</tr>

Fiddle

如何设置这些过滤器（不破坏全局搜索）？

Answer 1

您可以使用ng-hide语句进行虚拟过滤ng-hide="search.minAmount > tenant.account"。由于您使用搜索作为对象，我将其初始化为控制器中的一个：

$scope.search = {};
$scope.search.text = "";
$scope.search.minAmount = null;

并将过滤器设置为ng-hide：

<tr ng-repeat="tenant in tenants | filter:search.text | orderBy:sort:reverse" ng-class="{danger: payment.diff > 0}" ng-hide="search.minAmount != null && search.minAmount > tenant.account">

Demo

PS ：您可以更改您想要的内容，account或rent。

Answer 2

首先，如果要将对象传递给过滤器，则此对象必须包含列表对象的相同属性，例如，找出tenants包含＆＃34的name ; a＆＃34;，您可以将对象{name:"a"}传递给过滤器

tenant in tenants | filter:{name:"a"} | orderBy:sort

所以你可能会误解过滤器的使用......

要实现您的目标，您可以使用$filter服务自定义自己的过滤器。这是一个例子：

在控制器中：

angular.module('ngAppRentManager', []).
controller('RentCtrl', ['$scope', '$filter', function ($scope, $filter) {

    $scope.search = {
        keyword: "",
        pos_only: false
    }

    $scope.getFilteredTenants = function() {
        var filtered_tenants = $scope.tenants;
        filtered_tenants = $filter("filter")(filtered_tenants, $scope.search.keyword);
        if ($scope.search.pos_only) {
            filtered_tenants = $filter("filter")(filtered_tenants, function(tenant) {
                return tenant.amount > 0;
            });
        }
        filtered_tenants = $filter("orderBy")(filtered_tenants, $scope.sort, $scope.reverse);
        return filtered_tenants;
    };

}]);

在html中：

<li><a href="#" ng-click="search.pos_only = true">Pos only</a></li>
<li><a href="#" ng-click="search.pos_only = false">All</a></li>

<input type="text" class="form-control" placeholder="Search all" ng-model="search.keyword" />

<tr ng-repeat="tenant in getFilteredTenants()" ng-class="{danger: payment.diff > 0}">
    <td>{{tenant.rent | currency: "€&nbsp;"}}</td>
    <td>{{tenant.name}}</td>
    <td>{{tenant.tel}}</td>
    <td><a href="mailto:{{tenant.mail}}">{{tenant.mail}}</a></td>
    <td>{{tenant.amount}}>
    <td>{{tenant.address}}</td>
</tr>

Fiddle

AngularJS：如何通过单击设置过滤

2 个答案: