pick list

pick list angularjs component

by Ammi Reddy Kovvuri

HTML

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <div class="currencies-controller" ng-controller="currencyCtrl">
      <form novalidate>
        <div class="input-group">
          <input type="text" class="form-control"  ng-focus="isListHidden=false;" placeholder="Search by country" ng-model="selectedCountry.country">
          <span class="input-group-addon" id="basic-addon2">Currency code: {{selectedCountry.currency}}</span>
        </div>

      </form>
      <ul class="list-group" ng-hide="isListHidden">
        <li ng-click="onSelectCurrency(data)" ng-repeat="data in currencies | filter : {'country' : selectedCountry.country}" class="list-group-item">
          {{data.country}}
        </li>

      </ul>
      {{currrencies}}
    </div>
  </body>

</html>

JavaScript

(function() {
  var myApp = angular.module("myApp", []);
  myApp.controller('currencyCtrl', ["$scope", function($scope) {
  function getSelectedCurrency(id) {
  	return response.currencies.filter(function(item){
    		return item.id === id;
    });
  }
    var response = {
      "currencies": [{
          "country": "Afghanistan",
          "currency": "Afghani",
          "id": 1
        },
        {
          "country": "India",
          "currency": "INR",
          "id": 2
        },
        {
          "country": "Japan",
          "currency": "Yen",
          "id": 3
        },
        {
          "country": "New Zealand",
          "currency": "New Zealand Dollar",
          "id": 4
        },
        {
          "country": "Norway",
          "currency": "Norwegian Krone",
          "id": 5
        }
      ],
      selectedCurrencyId: 3
    };
    $scope.isListHidden = true;
    $scope.currencies = response.currencies;
    $scope.selectedCountry =   angular.copy(getSelectedCurrency(response.selectedCurrencyId)[0]);
$scope.onSelectCurrency = function(item) {
	$scope.selectedCountry = angular.copy(item);
  $scope.isListHidden = true;
}
  }]);
}())