CODEWITHSUNDEEP
javascriptarraysangularjsangularjs-ng-options
Yann Assah
Yann Assah

Reputation: 3

Angular ng-options sending array values

I'm trying to use AngularJS on simple form I wrote. Using ng-options for my , but when the form is validated, the value I receive from the select is the range of my choice in the array, not the actual string I choose in the form

<section id="signin" ng-controller="Sign_in">
    <form method="post" action="xxxx.php">
      <div id="contact"> 
    <div class="input_label user"> 
      <label for="country">Pays</label>
    </div> 
    <select ng-options="country for country in countries" name="country" ng-model="Country"></select>
      </div> 
      <br>
      <input type="submit">
    </form>
</section>

Here is the Angular code

angular.module('commande',[]).controller('Sign_in',function Sign_in($scope, $element) {

$scope.countries = [
    "Afghanistan","Afrique du Sud","Albanie","Algérie","Allemagne","Andorre","Angola","Antigua et Barbuda","Arabie saoudite","Argentine","Arménie",
    "Australie","Autriche","Azerbaïdjan","Bahamas","Bahrein","Bangladesh","Barbade","Belgique","Bélize","Benin","Bhoutan","Biélorussie","Bolivie",
    "Bosnie-Herzégovine","Botswana","Brésil","Brunei","Bulgarie","Burkina Faso","Burundi","Cambodge","Cameroun","Canada","Cap Vert","Centrafrique",
    "Chili","Chine","Chypre","Colombie","Comores","Congo démocratique","Congo","Corée du Nord","Corée du Sud","Costa Rica","Côte d'Ivoire","Croatie",
    "Cuba","Danemark","Djibouti","Dominique","RépubliqueDominicaine","Egypte","Emirats Arabes Unis","Equateur","Erythrée","Espagne","Estonie","Etats-Unis",
    "Ethiopie","Fidji","Finlande","France","Gabon","Gambie","Géorgie","Ghana","Grèce","Grenade","Groenland","Guatémala","Guinée","Guinée Bissau",
    "Guinée équatoriale","Guyana","Haïti","Honduras","Hong Kong","Hongrie","Inde","Indonésie","Irak","Iran","Irlande","Islande","Israël","Italie",
    "Jamaïque","Japon","Jordanie","Kazakhstan","Kenya","Kirghizstan","Kiribati","Koweït","Laos","Lesotho","Lettonie","Liban","Liberia","Libye",
    "Liechtenstein","Lituanie","Luxembourg","Macédoine","Madagascar","Malaisie","Malawi","Maldives","Mali","Malte","Maroc","Marshall","Maurice",
    "Mauritanie","Mexique","Micronésie","Moldavie","Monaco","Mongolie","Mozambique","Myanmar","Namibie","Népal","Nicaragua","Niger","Nigeria",
    "Norvège","Nouvelle Zélande","Oman","Ouganda","Ouzbekistan","Pakistan","Palau","Palestine","Panama","Papouasie - Nouvelle Guinée","Paraguay",
    "Pays-Bas","Pérou","Philippines","Pologne","Porto Rico","Portugal","Qatar","Roumanie","Royaume-Uni","Russie","Rwanda","Saint Christophe et Nevis",
    "Saint Vincent et les Grenadines","Sainte Lucie","Salomon","Salvador","Samoa","São Tomé et Príncipe","Sénégal","Seychelles","Sierra Leone","Singapour",
    "Slovaquie","Slovénie","Somalie","Somaliland","Soudan","Sri Lanka","Suède","Suisse","Surinam","Syrie","Swaziland","Tadjikistan","Taïwan","Tanzanie",
    "Tchad","Tchéquie","Thaïlande","Tibet","Timor Oriental","Togo","Tonga","Trinité et Tobago","Tunisie","Turkmenistan","Turquie","Tuvalu","Ukraine",
    "Uruguay","Vanuatu","Vatican","Vénézuéla","Vietnam","Yémen","Yougoslavie","Zambie","Zimbabwe"
 ];

Upvotes: 0

Views: 971

Answers (2)

skieter
skieter

Reputation: 449

For some reason you cannot use the value of the array as the value in the select using ngOptions. You will have to do this:

<select name="country" ng-model="Country" >
    <option ng-repeat="country in countries" value="{{country}}">
       {{country}}
    </option>
</select>

If you want to also set the value from Country add ng-selected to the option tag, e.g.

<option ng-repeat="country in countries" value="{{country}}" ng-selected="country == Country">
   {{country}}
</option>

Upvotes: 1

Pak
Pak

Reputation: 2213

I think you need to apply a filter to get the value.

If I were you I'd use the excellent angular-ui typeahead directive which work with Boostrap 3. Your code would then be :

  <input type="text" ng-model="selected" typeahead="country for country in countries | filter:$viewValue | limitTo:8" class="form-control">

Upvotes: 0

Related Questions