AngularJS：如何通过点击

设置过滤器如何设置特定的搜索条件，如：search.date > someDate()或search.amount > 0AngularJS：如何通过点击

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

我现在有一个输入：
<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

如何设置这些类型的过滤器（没有打破全局搜索）？

来源

2014-11-05 Jonathan

我不明白你想做的事......你使用条件“search.amount> 0”，但租户对象中没有称为“金额”的属性。另一方面，有一个包含日期和金额的“搜索”对象，但在您的文本输入中还有另一个名为“搜索”的变量作为模型，它们是同一个对象吗？ – 2014-11-05 01:20:11

更新了模板！提到搜索的地方都意味着同样的事情。我将它用于'filter：search'。 – Jonathan 2014-11-05 08:35:39

您可以使用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。

来源

2014-11-05 08:56:56

我爱你的解决方案，太糟糕了，它与桌子的“偶/奇”造型混淆。 – Jonathan 2014-11-12 21:54:46

首先，如果你想传递一个对象进行过滤，此对象必须包含列表的对象相同的属性，例如，要找出tenants其name包含“一”，你可以传递一个对象{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

来源

2014-11-05 09:39:24

AngularJS：如何通过点击

回答

相关问题