web-dev-qa-db-fra.com

Supprimer l'option vide de Sélectionner une option avec AngularJS

Je suis nouveau sur AngularJS. J'ai beaucoup cherché, mais cela ne résout pas mon problème.

Je reçois une option vide pour la première fois dans la zone de sélection.

Voici mon code HTML

<div ng-app="MyApp1">
    <div ng-controller="MyController">
        <input type="text" ng-model="feed.name" placeholder="Name" />
        <select ng-model="feed.config">
            <option ng-repeat="template in configs">{{template.name}}</option>
        </select>
    </div>
</div>

JS

var MyApp=angular.module('MyApp1',[])
MyApp.controller('MyController', function($scope) {
    $scope.feed = {};

      //Configuration
      $scope.configs = [
                                 {'name': 'Config 1',
                                  'value': 'config1'},
                                 {'name': 'Config 2',
                                  'value': 'config2'},
                                 {'name': 'Config 3',
                                  'value': 'config3'}
                               ];
      //Setting first option as selected in configuration select
      $scope.feed.config = $scope.configs[0].value;
});

Mais cela ne semble pas fonctionner. Comment puis-je résoudre ce problème? Voici Démo JSFiddle

angularjsangularjs-select
75
iCode

Pour référence: Pourquoi angularjs inclut une option vide dans select ?

Le option vide est généré lorsqu'une valeur référencée par ng-model n'existe pas dans un ensemble d'options transmises à ng-options. Cela empêche la sélection accidentelle de modèles: AngularJS peut voir que le modèle initial est indéfini ou non dans l'ensemble des options et ne veut pas décider seul de la valeur du modèle.

En bref: l'option vide signifie qu'aucun modèle valide n'est sélectionné (par valide, je veux dire: parmi l'ensemble des options). Vous devez sélectionner une valeur de modèle valide pour vous débarrasser de cette option vide.

Changer votre code comme ça

var MyApp=angular.module('MyApp1',[])
MyApp.controller('MyController', function($scope) {
  $scope.feed = {};

  //Configuration
  $scope.feed.configs = [
    {'name': 'Config 1',
     'value': 'config1'},
    {'name': 'Config 2',
     'value': 'config2'},
    {'name': 'Config 3',
     'value': 'config3'}
  ];
  //Setting first option as selected in configuration select
  $scope.feed.config = $scope.feed.configs[0].value;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="MyApp1">
  <div ng-controller="MyController">
    <input type="text" ng-model="feed.name" placeholder="Name" />
    <!-- <select ng-model="feed.config">
<option ng-repeat="template in configs">{{template.name}}</option>
</select> -->
    <select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs">
    </select>
  </div>
</div>

Démonstration de travail JSFiddle

UPDATE (31 décembre 2015)

Si vous ne souhaitez pas définir de valeur par défaut et souhaitez supprimer l'option vide,

<select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs">
      <option value="" selected="selected">Choose</option>
</select>

Et dans JS pas besoin d'initialiser la valeur.

$scope.feed.config = $scope.feed.configs[0].value;

92
Shiju K Babu

Bien que toutes les suggestions ci-dessus fonctionnent, il me faut parfois une sélection vide (affichant un texte fictif) lors de la saisie initiale de mon écran. Donc, pour empêcher la boîte de sélection d'ajouter cette sélection vide au début (ou parfois à la fin) de ma liste, j'utilise cette astuce:

Code HTML

<div ng-app="MyApp1">
    <div ng-controller="MyController">
        <input type="text" ng-model="feed.name" placeholder="Name" />
        <select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs" placeholder="Config">
            <option value="" selected hidden />
        </select>
    </div>
</div>

Maintenant que vous avez défini cette option vide, la case à cocher est heureuse, mais vous la gardez masquée.

52
RedSparkle

Voici un violon mis à jour: http://jsfiddle.net/UKySp/

Vous deviez définir la valeur initiale de votre modèle sur l'objet réel:

$scope.feed.config = $scope.configs[0];

Et mettez à jour votre sélection pour qu'elle ressemble à ceci:

<select ng-model="feed.config" ng-options="item.name for item in configs">
21
Adam Putinski

Une autre méthode à résoudre consiste à utiliser: $first dans _ng-repeat_

Usage:

_<select ng-model="feed.config">
    <option ng-repeat="template in configs" ng-selected="$first">{{template.name}}</option>
</select>
_

Références :

ngSelected : https://docs.angularjs.org/api/ng/directive/ngSelected

$ first : https://docs.angularjs.org/api/ng/directive/ngRepeat

À votre santé

14
Roy M J

C'est une sorte de solution de contournement mais fonctionne comme un charme. Ajoutez simplement <option value="" style="display: none"></option> en tant que remplisseur. Comme dans:

<select size="4" ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs">
       <option value="" style="display: none"></option>
</select>
3
Himanshu Arora

Il y a plusieurs façons comme -

<select ng-init="feed.config = options[0]" ng-model="feed.config"
        ng-options="template.value as template.name for template in feed.configs">
</select>

Ou

$scope.feed.config = $scope.configs[0].name;
3
Bhalchandra K

Changez votre code comme ça. Vous oubliez l'option value inside. Avant d’affecter le modèle ng. Il doit avoir une valeur. Ce n'est qu'alors que la valeur indéfinie ne sera pas obtenue.

<div ng-app="MyApp1">
<div ng-controller="MyController">
    <input type="text" ng-model="feed.name" placeholder="Name" />
     <select ng-model="feed">
        <option ng-repeat="template in configs" value="template.value">{{template.name}}    
 </option>
    </select>
    </div>
 </div>

JS

 var MyApp=angular.module('MyApp1',[])
 MyApp.controller('MyController',function($scope) {  
      $scope.feed = 'config1';      
      $scope.configs = [
         {'name': 'Config 1', 'value': 'config1'},
         {'name': 'Config 2', 'value': 'config2'},
         {'name': 'Config 3', 'value': 'config3'}
      ];
 });
2
Anbu

Si vous voulez juste supprimer l’espace vide, utilisez ng-show et vous avez terminé! Pas besoin d'initialiser la valeur dans JS.

<select ng-model="SelectedStatus" ng-options="x.caption for x in statusList">
    <option value="" ng-show="false"></option>
</select>`
2
Palash

Utilisez ng-value au lieu de valeur.

$scope.allRecs = [{"text":"hello"},{"text":"bye"}];
$scope.X = 0;

et puis dans le fichier HTML devrait être comme:

<select ng-model="X">  
     <option ng-repeat="oneRec in allRecs track by $index" ng-value="$index">{{oneRec.text}}</option>
</select>
1
Farzad.Kamali

Pour moi, la réponse à cette question a été d'utiliser <option value="" selected hidden /> comme l'a proposé @RedSparkle plus d'ajouter ng-if="false" pour fonctionner dans IE.

Donc mon option complète est (a des différences avec ce que j'ai écrit auparavant, mais cela n'a pas d'importance à cause de ng-if):

<option value="" ng-if="false" disabled hidden></option>

0
Vovch