web-dev-qa-db-fra.com

AngularJs et <select>: les options sélectionnées par défaut sont supprimées

Je m'attends à ce que le code suivant rende une liste déroulante avec la troisième option sélectionnée par défaut. Cependant, lorsque je lie la sélection avec angularjs, la sélection par défaut disparaît. Toute pensée?

var myApp = angular.module('myApp', []);

...

<div>
  <select id="myselection" ng-model="selectedColors">
    <option value="1" >Red</option>
     <option value="2">Blue</option>
     <option value="3" selected="selected">Green</option>
  </select>

  <div>
    Selected Colors: {{selectedColors }}
  </div>
</div>

Voici un exemple de travail: http://jsfiddle.net/TXPJZ/134/

Merci!

angularjshtml-select
11
Ivo

Le moyen le plus simple de réparer votre implémentation est d'utiliser ng-init.

<div>
    <select id="myselection" ng-init="selectedColors=3" ng-model="selectedColors">
        <option value="1">Red</option>
        <option value="2">Blue</option>
        <option value="3">Green</option>
    </select>
    <div>Selected Colors: {{selectedColors }}</div>
</div>

Essayez-le sur FIDDLE .

21
zsong

Angular remplace la propriété "selected" lorsque vous liez la sélection à un modèle. Si vous inspectez le DOM rendu, vous constaterez qu'un nouvel élément a été ajouté:

<option value="? undefined:undefined ?"></option>

Afin de sélectionner automatiquement la troisième option, vous devez pré-renseigner le modèle dans l'étendue. Il y a plusieurs façons de le faire, y compris en enveloppant la sélection dans un contrôleur:

<div ng-controller="MyCtrl">
    <select id="myselection" ng-model="selectedColors">
        <option value="1">Red</option>
        <option value="2">Blue</option>
        <option value="3">Green</option>
    </select>
<div>Selected Colors: {{selectedColors }}</div>

Et puis en définissant ce modèle dans le contrôleur.

var myApp = angular.module('myApp', [])
    .controller('MyCtrl', ['$scope', function ($scope) {
    $scope.selectedColors = 2;
}]);

Voici un exemple en cours d'exécution.

http://jsfiddle.net/93926/

Alternativement, vous pouvez simplement l'initialiser en utilisant ng-init comme dans cet exemple:

<div ng-init="selectedColors=3">

http://jsfiddle.net/9JxqA/1/

EDIT: Suppression de la propriété sélectionnée dans le premier exemple, elle n'est plus nécessaire.

10
Brendan

Vous devez faire seulement deux choses 1) ng-init = "days = 'noday'" 2) ng-selected = "true"

 <select class="filtersday" ng-init="days='noday'" ng-model="days">
 <option ng-selected="true" value="noday">--Select Day--</option>
2
Deepak Dholiyan

En ajoutant une option avec une valeur vide pour sélectionner et en initialisant selectedColors dans une chaîne vide (ng-init = "selectedColors = ''"), nous pouvons voir l'option 'select color' en haut au lieu d'avoir la première couleur à sélectionner par défaut:

<div>
<select id="myselection" ng-init="selectedColors=''" ng-model="selectedColors">
    <option value="">Select Color</option>
    <option value="1">Red</option>
    <option value="2">Blue</option>
    <option value="3">Green</option>
</select>
<div>Selected Colors: {{selectedColors }}</div>

Essayez-le sur Fiddle http://jsfiddle.net/CodecPM/qxyckf7u/

2
CodecPM

Vous devez utiliser un seul devis pour travailler par 

<select ng-model="liveDataType" ng-init="liveDataType='1'" class="form-control input height" required>
    <option value="1">Running data</option>
    <option value="2">Rest Data</option>
    <option value="3">All Data</option>
</select>
0
Majedur Rahaman

Utilisez ng-selected = "true"

Vérifiez le code ci-dessous:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<select ng-model="foo" ng-app >
    <option value="1">1</option>
    <option ng-selected="true" value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

0
Suraj Sangani