angular js autocomplete key value array

Question

I looked at the autocomplete example in: http://jsfiddle.net/sebmade/swfjT/ How can i make an auto complete to key value array? This is my array:

$countryCodesToCountryNames = array(
"AD" => "Andorra",
"AE" => "United Arab Emirates",
"AF" => "Afghanistan",
"AG" => "Antigua and Barbuda",
"AI" => "Anguilla",
"AL" => "Albania",
"AM" => "Armenia",
"AO" => "Angola",
"AQ" => "Antarctica",
"AR" => "Argentina",
"AS" => "American Samoa",
"AT" => "Austria",
"AU" => "Australia",
"AW" => "Aruba",
"AX" => "Åland Islands",
"AZ" => "Azerbaijan",
"BA" => "Bosnia and Herzegovina",
"BB" => "Barbados",
"BD" => "Bangladesh",
"BE" => "Belgium",
"BF" => "Burkina Faso",
"BG" => "Bulgaria",
"BH" => "Bahrain",
"BI" => "Burundi",
"BJ" => "Benin",
"BL" => "Saint Barth,élemy",
"BM" => "Bermuda",
"BN" => "Brunei Darussalam",
"BO" => "Bolivia, Plurinational State of",
"BQ" => "Bonaire, Sint Eustatius and Saba",
"BR" => "Brazil",
"BS" => "Bahamas",
"BT" => "Bhutan",
"BV" => "Bouvet Island",
"BW" => "Botswana",
"BY" => "Belarus",
"BZ" => "Belize",
"CA" => "Canada");

I need that the autocomplete input field will present the country name(array value), But when selected(on-click) i'll get the country code(array key) to the angular controller.

what is the code changes needed in the example above?

Answer 1

I did an example for this case using another kind of array.

I changed in this way the array

$scope.selectedCountry = '';
$scope.countryCodesToCountryNames = [
         {'code':'AD', 'name': 'Andorra'},
         {'code':'BZ', 'name': 'Belize'},
         {'code':'CA', 'name': 'Canada'}];

in your html you put this code

                 <blockquote>
                  CODE: {{selectedCountry.code}}<br/>                  
                  NAME: {{selectedCountry.name}}<br/>                  
                </blockquote>
                Select Country: <input type="text" ng-model="selectedCountry" typeahead="country as (country.name ) for country in countryCodesToCountryNames | filter:$viewValue" />

This are 3 examples of autocompleted: jsfiddle

HTML Code

<div class="container">
    <div ng-controller="mainCtrl" class="row-fluid">
        <form class="row-fluid">
            <div class="container-fluid"><br/>
                 <blockquote>
                  State: {{selectedState}}<br/>
                </blockquote>

                Select States: <input type="text" ng-model="selectedState" typeahead="state for state in states | filter:$viewValue" />
                <br/>

                <blockquote>
                  ID: {{selectedUser.id}}<br/>
                  Name: {{selectedUser.name + ' ' + selected.last}}<br/>
                  Age: {{selectedUser.age}}<br/>
                  Gender: {{selectedUser.gender}}
                </blockquote>

                Select User: <input type="text" ng-model="selectedUser" typeahead="user as (user.first + ' ' + user.last) for user in users | filter:$viewValue" />

                <br/>

                <blockquote>
                  CODE: {{selectedCountry.code}}<br/>                  
                  NAME: {{selectedCountry.name}}<br/>                  
                </blockquote>
                Select Country: <input type="text" ng-model="selectedCountry" typeahead="country as (country.name ) for country in countryCodesToCountryNames | filter:$viewValue" />
            </div>
        </form>
    </div>
</div>

Javascript code

angular.module('myApp', ['ui.bootstrap'])
    .controller("mainCtrl", function ($scope) {
    $scope.selectedState = '';
    $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

    $scope.selectedUser = '';
    $scope.users = [
    {'id': 1, 'first': 'John', 'last': 'Depp', 'age':52, 'gender':'male'}, 
    {'id': 2, 'first': 'Sally', 'last': 'JoHanson', 'age':13, 'gender':'female'},
    {'id': 3, 'first': 'Taylor', 'last': 'Swift', 'age':22, 'gender':'female'},
    {'id': 4, 'first': 'Max', 'last': 'Payne', 'age':72, 'gender':'male'},
    {'id': 5, 'first': 'Jessica', 'last': 'Hutton', 'age':12, 'gender':'female'},
    {'id': 6, 'first': 'Nicholas', 'last': 'Cage','age':3, 'gender':'male'},
    {'id': 7, 'first': 'Lisa', 'last': 'Simpson', 'age':18, 'gender':'female'}
  ];

     $scope.selectedCountry = '';
     $scope.countryCodesToCountryNames = [
         {'code':'AD', 'name': 'Andorra'},
         {'code':'BZ', 'name': 'Belize'},
         {'code':'CA', 'name': 'Canada'}];
});

Answer 2

Have a look at http://starttheshift.github.io/MacGyver/example/#autocomplete There

mac-autocomplete-on-select
Type: Function
Function called when user select on an item

    selected - {Object} The item selected

So u get triggered when selected item. then you can get Index of element in original array. Use this Index to get Correspondent Item from another array with Short Namings.

 $scope.countries= ["Unates States", "Germany"];
 $scope.cn= ["US", "DE"];