Question

我正在尝试在我写的简单表格上使用AngularJS。为我使用ng-options，但是在验证表单时，我从select中收到的值是我在数组中选择的范围，而不是我在表单中选择的实际字符串

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

这是Angular代码

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"
 ];

Answer 1

由于某种原因，您无法使用数组的值作为使用ngOptions的select中的值。你必须这样做：

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

如果您还想将Country添加ng-selected的值设置为选项标记，例如

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

Answer 2

我认为您需要应用过滤器来获取值。

如果我是你，我会使用与Boostrap 3配合使用的优秀angular-ui typeahead directive。您的代码将是：

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

Angular ng-options发送数组值

2 个答案: