JSFiddle - React, Tailwind, and code Playground

by Zaiste

HTML

<div ng-app="MyModule">
  <div ng-controller="Ctrl">
    <input ng-model="symbol"><br>
      <table>
    <tbody>
      <tr ng-repeat="(symbol, rate) in rates | filterBySymbol:symbol">
          <td>{{symbol}}</td>
          <td>{{rate}}</td>
      </tr>
      </tbody>
    </table>
  </div>
</div>

CSS

.ng-invalid { border: 1px solid red; }
div
{
    display: block;
    padding: 7px;
    background-color: #f5f5f5;
}

JavaScript

angular.module('MyModule', []).
filter('filterBySymbol', function() {
    return function(input, symbol) {
        if (symbol) {
            var newResult = {};
            angular.forEach(input, function(v, k) {
                if (~k.toLowerCase().indexOf(symbol)) {
                    newResult[k] = v;
                }
            });
            return newResult;
        } else {
            return input;
        }

    }
});

function Ctrl($scope) {
    $scope.rates = {
        CHF: "1.2077",
        HRK: "7.5238",
        HKD: "10.0015",
        LVL: "0.6964",
        MXN: "16.6145",
        DKK: "7.4590",
        LTL: "3.4528",
        MYR: "3.9434",
        USD: "1.2905",
        CAD: "1.2806",
        BGN: "1.9558",
        NOK: "7.3305",
        ZAR: "11.2242",
        INR: "70.3000",
        THB: "39.593",
        CNY: "8.0358",
        SGD: "1.5757",
        AUD: "1.2318",
        ILS: "4.9491",
        KRW: "1397.67",
        RON: "4.5385",
        PLN: "4.1312",
        JPY: "106.19",
        CZK: "25.208",
        GBP: "0.80610",
        IDR: "12417.98",
        PHP: "52.876",
        NZD: "1.5506",
        SEK: "8.6180",
        HUF: "283.96",
        TRY: "2.3118",
        BRL: "2.6860",
        RUB: "39.9503"
    };
}