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

J'attends le code suivant pour rendre une liste déroulante avec la troisième option est sélectionnée par défaut. Cependant, lorsque je la lie de la sélectionner 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!

OriginalL'auteur Ivo | 2013-07-26

angularjs html-select

21

La façon la plus simple de fixer votre mise en œuvre consiste à 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>
```
Essayer sur VIOLON.

Sans doute évident, mais comme il m'a pris de sortir, n'oubliez pas de joindre le ng-initialisation de la valeur entre guillemets simples si ses une chaîne de caractères, par exemple, ng-init="selectedColors= "rouge""
cela ne fonctionne pas lorsque vous êtes remplissage de la sélectionner à l'aide de ng-options="row.desc for row in affiliationTable" parce que je ne sais pas de manière à affecter la valeur pour le faire de cette façon, savez-vous comment je peux faire?
L'officiel documentation de ng-init est la suivante: "La seule utilisation appropriée de ngInit pour aliasing propriétés spéciales de ngRepeat, comme on le voit dans la démo ci-dessous. Outre ce cas, vous devez utiliser les contrôleurs plutôt que ngInit pour initialiser les valeurs d'un champ.". Est-il un autre moyen de supprimer de valeur "par défaut"?

OriginalL'auteur zsong
9

Angulaire remplace le "sélectionné" propriété lorsque vous liez le sélectionner pour un modèle. Si vous inspectez le rendu DOM, vous trouverez un nouvel article a été ajouté:
```
<option value="? undefined:undefined ?"></option>
```
Afin de sélectionner automatiquement la troisième option vous devez vous pré-remplir le modèle dans le champ d'application. Il ya quelques façons de le faire, y compris l'habillage de la sélectionner 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 la définition de ce modèle dans le contrôleur.
```
var myApp = angular.module('myApp', [])
    .controller('MyCtrl', ['$scope', function ($scope) {
    $scope.selectedColors = 2;
}]);
```
Voici un exemple concret.

http://jsfiddle.net/93926/

Alternativement, vous pouvez simplement l'initialiser à l'aide de 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, il n'est plus nécessaire.

OriginalL'auteur Brendan
2

Par l'ajout de l'option avec une valeur vide pour le sélectionner et de l'initialisation d'selectedColors la chaîne vide(ng-init="selectedColors=""), nous pouvons voir "sélectionner une Couleur sur l'option" sur le dessus au lieu d'avoir d'abord la couleur sélectionnée defaultly:
```
<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>
```
Essayer de Violon http://jsfiddle.net/CodecPM/qxyckf7u/

J'ai choisi cette réponse. en s'appuyant sur les ng-init lui-même crée parfois temporaire vide <option>. Suggestion: ajouter disabled="disabled" <option> pour la "sélection de la Couleur". Je vous remercie pour votre réponse.

OriginalL'auteur CodecPM

Vous avez besoin de ne faire que deux choses
1)ng-init="jours='noday'"
2)ng-selected="true"

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

OriginalL'auteur Deepak Dholiyan

Vous devez utiliser des guillemets simples 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>

OriginalL'auteur Majedur Rahaman

Vous devez vous connecter pour publier un commentaire.