Question

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

我能够将过滤功能绑定到用户点击过滤器，但功能本身并没有按计划运行。有两个问题：

我似乎无法将过滤器默认为null。其中一个链接是显示所有卡片＆＃39;通过将过滤器设置为null，但是我无法在页面加载时将其设置为单击，这可以解决。
我需要动态生成过滤器，例如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

最后以不同的方式处理问题。我为数组中的每个卡片对象分配了一个属性＆＃39; status＆＃39;默认为1。如果状态值=== 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;
}

在ng-click上动态过滤ng-repeat

1 个答案: