Question

注意：我已阅读并尝试this question内的所有答案。不幸的是，它不适合我，我没有运气。

我创建了一个简单的Angular应用程序来玩CurrencyLayer API。我的应用程序运行良好，但只有一件事没有用。

我无法过滤货币密钥。我想要的是，当用户在搜索框中输入其货币时，货币会在ul div中过滤掉。

filter:{key:searchCurrency}对我不起作用。

这是我的代码：

<!DOCTYPE html>
<html ng-app="app">

<head>
    <meta charset="utf-8">
    <title>Angular Currency Converter</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
    body {
        margin-top: 20px;
    }

    input {
        outline: none;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
    }
    </style>
</head>

<body ng-controller="myCtrl">
    <div class="container">
        <div class="row">
            <div class="column-md-12">
                <p>Base currency: {{sourceCurrency}}</p>

                <label>Amount</label>
                <input type="number" ng-model="amount" class="form-control" /><br/>

                <label>Search</label>
                <input ng-model="searchCurrency" class="form-control" placeholder="Search currency"/><br/>
                <pre>searchCurrency: {{searchCurrency}}</pre>

                <p>{{amount}} {{sourceCurrency}} is equavalent to:</p>

                <ul ng-repeat="(key, quote) in quotes | filter:{key:searchCurrency}">
                    <!--
                    key.slice(3,6) is to remove USD from all result strings like USDAED -> AED
                    quote * amount will give calculated result based on input user give
                    number : 2 to give the result nice looking 2 decimal places
                    -->
                    <li>{{key.slice(3,6)}}: {{quote * amount | number : 2}}</li>
                </ul>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    var app = angular.module('app', []);

    app.controller('myCtrl', function($scope, $http) {
        // init the amount to 1 (USD 1.00)
        $scope.amount = 1;

        $http.get("http://apilayer.net/api/live?access_key=XXX&format=1")
            .success(function(response) {
                // get currency exchange data
                $scope.quotes = response.quotes;
                // get source currency (USD)
                $scope.sourceCurrency = response.source;
            });

    })
    </script>
</body>
</html>

示例JSON数据，例如Gist内部。

Plunker

如何使搜索过滤器正常工作？

过滤器对象键不起作用

0 个答案: