角js自動完成鍵值數組

我看着自動完成的例子：http://jsfiddle.net/sebmade/swfjT/ 我怎樣才能使自動完成鍵值數組？這是我的數組：角js自動完成鍵值數組

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

我需要自動完成輸入字段會出現國名（數組值），但選擇時（上單擊）我會得到國家代碼（數組的鍵）到角度控制器。

以上示例中所需的代碼更改是什麼？

來源

2013-11-20 user3009225

你可以用戶的角度自舉[預輸入（http://angular-ui.github.io/bootstrap/#/typeahead）指令。 –

看一看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

所以u得到時所選擇項觸發。那麼你可以得到原始數組中的元素索引。使用此索引從另一個陣列中獲取帶有短Namings的對應項。

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

來源

2013-11-20 16:05:16

我做了一個使用另一種數組的例子。

我以這種方式改變了陣列

$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'}]; 
});

來源

2015-03-17 12:07:48

角js自動完成鍵值數組

回答

相關問題