Angular js Comment remplir liste déroulante avec JSON sans ng-options

je remplir déroulant de cette façon, et les données sont à venir, mais aucune donnée n'a été sélectionné lors de l'déroulant apparaît en premier temps. voici mon code. s'il vous plaît avoir un coup d'oeil et me dire où j'ai fait l'erreur.

<div ng-controller="DemoCtrl" ng-app="main">
<select ng-model="selectedCountry">
<option value="">Select Account</option>
<option ng-repeat="item in chooseCountries" value="item.countryId">
  {{item.countryId}}-{{item.name}}
</option>    
</select>  

<span>Selected country id is {{selectedCountry.countryId}}</span>   
</div>

var app = angular.module('main', []);
app.controller('DemoCtrl', function ($scope) {

    $scope.chooseCountries=[
        {countryId : 1, name : "France - Mainland", desc: "some description" },
        {countryId : 2, name : "Gibraltar", desc: "some description"},
        {countryId : 3, name : "Malta", desc: "some description"}
    ];

    $scope.selectedCountry = $scope.chooseCountries[0].countryId;
});
  • ngValue pas value
InformationsquelleAutor Mou | 2016-04-04
  1. 2

    Plus meilleure façon d'aller de l'usage de ng-options directive.

    <select ng-model="selectedCountry" 
  ng-options="country.countryId as (country.name+'-'+country.desc) for country in chooseCountries">
</select>

    Démo ici

    Pourquoi ng-repeat approche ne fonctionne pas?(Juste pour l'explication, ne recommande pas d'utiliser)

    Vous devez remplir l'option value attribut avec countryId correctement comme value="{{item.countryId}}"

    <select ng-model="selectedCountry">
   <option value="">Select Account</option>
  <option ng-repeat="item in chooseCountries" value="{{item.countryId}}">
    {{item.countryId}}-{{item.name}}
  </option>    
</select>

    Mais ci-dessus ne fonctionnera pas pour votre cas parce que vous avez eu countryId champ est dans le format de nombre, quand option affecter cette valeur à value attribut, il est converti en string format. Donc sur de chargement initial, vous ne les verrez pas countryId obtient liées à la boîte de sélection. la comparaison se fera comme 2==="2" ne serait pas true, afin de sélectionner la zone ne serait pas sélectionner une valeur, même si vous avez fourni dans ng-model.

    Vous pouvez trouver le problème plunkr ici

    Donc pour la fixation, il faut les convertir number de la valeur à string valeur en appelant toString méthode dessus comme ci-dessous

    $scope.selectedCountry = $scope.chooseCountries[0].countryId.toString();

    En faisant au-dessus de changement de zone de sélection ne sélectionnez fourni countryId valeur dans la liste déroulante car de la comparaison vrai "2"==="2"

    C'est pourquoi l'utilisation de ng-options serait mieux, ce qui ne conserver de la valeur datatype. Fondamentalement, ils ont travaillé sans mal les types de données de la valeur.

    http://plnkr.co/edit/evQJAKvMnl4btz4BZeuP?p=preview

    • u peut suivre fournir js fiddle?
    • vérifier ajouté plunkr
    • oui vérifier et a constaté u utilisation ng-options au lieu de ng-reprater dans votre code. montrez-moi ng-reprater pour déroulante.
    • regarde-mise à jour de réponse... où j'ai expliqué pourquoi ng-repeat partie ne fonctionne pas.. et ne +1 si vous le pouvez :p
    InformationsquelleAutor Pankaj Parkar
  2. 2
    <select ng-options="country as country.countryId+  ' (' + country.name + ')' for country in chooseCountries  ng-model="selectedCountry "></select>

    consulter:https://docs.angularjs.org/api/ng/directive/ngOptions

    InformationsquelleAutor Shushanth Pallegar
  3. 0

    Vous devez utiliser ng-options comme suit

    <select ng-model="selectedCountry" ng-options="country.countryId as country.name for country in  chooseCountries"></select>
    • dites-moi pourquoi nous avons besoin d'écrire un nom de champ de cette façon country.countryId as country.name for country in chooseCountries pourquoi ne peut-on pas écrire comme country.countryId,country.name for country in chooseCountries ?
    • Je ne pense pas que la valeur,le label fonctionne ici. Selon les documents suivants sont des options pour l'utilisation en ng-options si la source est un tableau. for array data sources: label for value in array, select as label for value in array, label group by group for value in array, label disable when disable for value in array, label group by group for value in array track by trackexpr, label disable when disable for value in array track by trackexpr, label for value in array | orderBy:orderexpr track by trackexpr (for including a filter with track by)
    InformationsquelleAutor Sagar