web-dev-qa-db-fra.com

Comment définir la valeur par défaut dans ng-options

Je peux définir une liste déroulante avec une valeur par défaut dans angularjs,

 <select name="repeatSelect" id="repeatSelect" ng-model="repeatSelect" ng-init=" repeatSelect = data[0].id">
    <option ng-repeat="option in data" value="{{option.id}}">{{option.name}}</option>
 </select>

Comment puis-je obtenir le même résultat avec ng-options? Je treid avec,

 <select name="repeatSelect" 
   id="repeatSelect" 
   ng-model="repeatSelect"
   ng-init=" repeatSelect = option.id"  
   ng-options="option.name for option in data track by option.id">
</select>

Mais pas d'utilisation. Échantillon le violon est ici

javascriptangularjsionic-frameworkhtml-selectng-options
11
mpsbhat

Utilisez ng-init pour définir la valeur par défaut de ng-options.

Voici le: demo

<select name="repeatSelect" 
   id="repeatSelect" 
   ng-model="repeatSelect"
   ng-init=" repeatSelect = data[0].id"  
   ng-options="option.id as option.name for option in data">          
</select>
19
Upal Roy

Tout cela manque l'utilisation de ng-init.

De la documentation angulaire:

Cette directive peut être utilisée pour ajouter des quantités inutiles de logique dans vos modèles. Il n'y a que quelques utilisations appropriées de ngInit, comme pour le repliement de propriétés spéciales de ngRepeat, comme le montre la démonstration ci-dessous; et pour injecter des données via un script côté serveur. Outre ces quelques cas, vous devez utiliser des contrôleurs plutôt que ngInit pour initialiser les valeurs sur une étendue.

Documents d'origine

À mon avis, la manière correcte de définir une valeur par défaut consiste simplement à pré-remplir votre propriété ng-model avec la valeur sélectionnée dans votre ng-options, angular faisant le reste.

Essentiellement, lorsque vous définissez la propriété $scope, votre sélection sera liée pour lui attribuer la valeur par défaut de votre tableau data. Si votre tableau data provient d'une requête ajax, affectez-le simplement une fois que vous avez la data.

.controller('test', ['$scope', function ($scope) {
    $scope.data = [{name: 'one', id: 1}, {name: 'two', id: 2},{name: 'three', id: 3}];
    $scope.repeatSelect= $scope.data[0];
}]);

Il y a une mise en garde à noter. Si vous utilisez la clé as Word dans votre expression, vous devez attribuer votre ng-model à la propriété réelle que vous lui indiquez de sélectionner.

Voir le violon complet en démonstration à la fois: http://jsfiddle.net/kb99gee8/

8
ste2425

j'ai réalisé ce dont vous avez besoin en utilisant votre code et ng-options comme vous l'avez mentionné, voici Working Fiddle

CODE complet

<div ng-app="ngrepeatSelect">
    <div ng-controller="ExampleController">
        <form name="myForm">
            <label for="repeatSelect">Angular select:</label>
            <select name="repeatSelect" 
   id="repeatSelect" 
   ng-model="repeatSelect"
   ng-init=" repeatSelect = data[0]"  
   ng-options="option.name for option in data track by option.id">
</select>
        </form>
        <br/> <tt>Selected value: {{repeatSelect.id}}</tt>

    </div>
</div>
<br/>
1
Manoj Salvi

Je vais suggérer un exemple Partie HTML

<select class="form-control" ng-model="data.selectedOption" required ng-options="option.name as option.name for option in venueNamelists"  ng-change="getmediationRooms(data.selectedOption)"></select>

Dans mon contrôleur

$ scope.data = {selectedOption: $ scope.venueNamelists [i] .name};

la valeur du modèle doit être égale à la paire clé/valeur dans les sitesamelistes.

0
athira renjan