Question

我查看了http://jsfiddle.net/sebmade/swfjT/中的自动填充示例如何自动完成键值数组？这是我的阵列：

$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");

我需要自动完成输入字段显示国家/地区名称（数组值），但是当选择（点击）时，我将获得角度控制器的国家代码（数组键）。

上面示例中所需的代码更改是什么？

Answer 1

我使用另一种数组为这种情况做了一个例子。

我用这种方式改变了数组

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

在您的html中放入此代码

                 <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" />

这是自动填充的3个示例：jsfiddle

HTML代码

<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代码

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

看看http://starttheshift.github.io/MacGyver/example/#autocomplete 那里

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

    selected - {Object} The item selected

所以当你选择的项目时你会被触发。那么你可以得到原始数组中元素的索引。使用此索引从具有Short Namings的另一个数组中获取通讯项目。

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

angular js自动完成键值数组

2 个答案: