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：如何通過點擊

回答

相關問題