動態過濾ng-repeat ng-click

我正在構建一個應用程序http://creditcardairlinepoints.com，我希望用戶能夠通過點擊界面側面的過濾器來過濾一系列信用卡。只有美國運通卡，免費卡。動態過濾ng-repeat ng-click

我能夠將過濾器函數綁定到用戶單擊過濾器，但函數本身不按計劃工作。有兩個問題：

我似乎無法將過濾器默認爲null。其中一個鏈接是顯示「點擊所有卡片」，通過設置過濾器爲空，但我無法在頁面加載時獲得此信息。
我需要動態生成過濾器，例如cardFee：0，minSpend：0，bonusCurrency：美國運通，我無法做到這一點。

我想知道如果我這樣做是錯誤的方式，而不是基於從前端陣列傳入的變量生成過濾器我應該設置一個循環，例如，

如果filterId = 0，不執行任何操作
如果filterId = 1，顯示美國運通卡

過濾器列表

使用NG-從陣列生成的過濾器鏈接列表重複。我已經成功地將它綁定到了下面的函數，並且可以成功地將值傳遞給它。

<ul class="nav nav-sidebar"> 
    <li ng-repeat="filter in filters" 
     ng-click="selectFilter($index);setFilter(filter.property, filter.value)" 
     ng-class="{active: $index===selectedIndex}"> 
     <a href="#">{{ filter.anchor }}</a> 
    </li> 
</ul>

卡輸出

卡輸出到表格單元格在同一行，這是想什麼，我就點擊過濾。

<tr ng-repeat="card in cards | orderBy:predicate:reverse | filter:cardFilter">

濾波器陣列

卡陣列工作正常，如果我編寫了這些過濾器的靜態它的工作原理。

$scope.filters = [ 
    { 
     'filterId': 0, 
     'anchor': 'All cards', 
     'property': '', 
     'value': '' 
    }, 
    { 
     'filterId': 1, 
     'anchor': 'American Express cards', 
     'property': 'bonusCurrency', 
     'value': 'amex' 
    }, 
    { 
     'filterId': 2, 
     'anchor': 'Avios cards', 
     'property': 'bonusCurrency', 
     'value': 'avios' 
    }, 
    { 
     'filterId': 3, 
     'anchor': 'No fee', 
     'property': 'cardFee', 
     'value': '0' 
    }, 
    { 
     'filterId': 4, 
     'anchor': 'No minimum spend', 
     'property': 'minSpend', 
     'value': '0' 
    } 
];

濾鏡功能

我試圖實現的，帶有空默認動態生成的過濾器。

/* Set first filter link to default */ 
$scope.cardFilter = ''; 

$scope.setFilter = function (k, v) { 
    $scope.cardFilter = {k:v}; 
};

來源

2015-04-15 jcpeden

顯示卡如果你可以添加小提琴，比我們能夠幫助您更好的方式.. – Ved

糟糕的設計。使用過濾器不是正確的方法。最好的解決方案是在改變濾波參數之後做一個調整ng-repeat數據的函數。 – YD1m

所以點擊後，拿原來的數組，過濾它，然後吐出更新的版本？ – jcpeden

通過以不同的方式接近問題，最終得到了這個工作。我默認爲陣列中的每個卡對象分配一個屬性「狀態」1。如果狀態值=== 1，那麼它顯示在DOM中。

當用戶點擊一個過濾器時，他們點擊鏈接的ID被髮送到app.js，然後更新數組中所有卡片的狀態屬性，這取決於與每個相關的一小塊邏輯鏈接。

ng-if然後遍歷數組並隱藏/顯示取決於其更新狀態的元素。

過濾器從卡陣列鏈接

<ul class="nav nav-sidebar"> 
    <li ng-repeat="filter in filters" ng-click="selectFilter($index);updateStatus(filter.filterId)" ng-class="{active: $index===selectedIndex}"><a href="#"></span>{{ filter.anchor }}</a></li> 
</ul>

表輸出

<tr ng-repeat="card in cards | orderBy:predicate:reverse" ng-if="cardFilter(card.cardStatus)">

樣品卡對象

{ 
     cardName: "American Express Preferred Rewards Gold", 
     cardStatus: 1, 
     cardBonus: 10000, 
     cardBonusVisual: 10000, 
     bonusValue: 100, 
     bonusCurrency: "spg", 
     bonusCurrencyVisual: "SPG points", 
     cardFeeSymbol: "£", 
     minSpendSymbol: "£", 
     cardFee: 75, 
     cardFeeVisual: "75", 
     imageName: "spg.jpg", 
     minSpend: 1000, 
     minSpendVisual: "1000", 
     spendTimeLimit: 90, 
     spendTimeLimitVisual: "90", 
     spendTimeLimitDays: "days", 
     cardURL: "https://www252.americanexpress.com/inga/uk/pers/begin.do?perform=IntlEapp:UK:triCredit&journey=B&intlink=uk-amex-cardshop-britishairwaysamericanexpresscreditcard-detail-applynow-main" 
    }

濾鏡陣列

$scope.filters = [ 
    { 
     'filterId': 0, 
     'anchor': 'All cards' 
    }, 
    { 
     'filterId': 1, 
     'anchor': 'American Express cards' 
    }, 
    { 
     'filterId': 2, 
     'anchor': 'Avios cards' 
    }, 
    { 
     'filterId': 3, 
     'anchor': 'No fee' 
    }, 
    { 
     'filterId': 4, 
     'anchor': 'No minimum spend' 
    } 
];

功能隱藏/表

$scope.cardFilter = function(cardStatus){ 
    if(cardStatus === 1){ 
     return true; 
    } 
    return false; 
}

來源

2015-04-15 14:35:43 jcpeden

動態過濾ng-repeat ng-click

回答

相關問題