动态筛选ng单击时的ng重复

Question

我正在http://creditcardairlinepoints.com我希望用户能够通过点击界面一侧的过滤器来过滤一系列信用卡，例如只有美国运通卡、免费卡。

我可以将过滤器函数绑定到单击过滤器的用户，但该函数本身并没有按计划工作。有两个问题：

1. 我似乎无法将过滤器默认为null。其中一个链接是通过将过滤器设置为null来显示点击时有效的"所有卡片"，但我无法在页面加载时显示
2. 我需要动态生成过滤器，例如cardFee:0，minSpend:0，bonusCurrency:amex，但我无法做到这一点

我想知道我是不是走错了路，与其根据从阵列通过前端传入的变量生成过滤器，我应该设置一个循环，例如

• 如果filterId＝0，则不执行任何操作
• 如果filterId=1，则显示amex卡

过滤器列表

使用ng repeat从数组生成的筛选器链接的列表。我已经成功地将其绑定到下面的函数，并可以成功地将值传递给它

<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'
}
];

过滤功能

我正在努力实现的是，一个具有null默认值的动态生成的过滤器。

/* Set first filter link to default */
$scope.cardFilter = ''; 
$scope.setFilter = function ( k, v ) {
$scope.cardFilter = {k:v};
};

Answer 1

通过以不同的方式处理问题，最终实现了这一点。默认情况下，我为数组中的每个卡对象分配了1的属性"status"。如果状态值===1，那么它将显示在DOM中。

当用户单击过滤器时，他们单击的链接的ID会被发送到app.js，然后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;
}