web-dev-qa-db-fra.com

AngularJS: Supprimer l'option de sélection vide dans angular ng-repeat

J'utilise ng-repeat pour afficher les options avec une valeur et un texte différents, et définir le paramètre par défaut. Mais encore une fois angular ajoute une option vide non définie. 

<select ng-model="newItem.financial_year_id" required style="min-width:180px;">
   <option ng-repeat="financial in account_year" value="{{financial.id}}" ng-selected="financial.status=='Active'">{{financial.financial_year}}</option>
</select>

Maintenant, l'actif est sélectionné mais l'option vide restitue.

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat
13
devo

Essayez plutôt ng-options:

<select ng-model="selectedFinancial" ng-options="c.financial_year for c in account_year"
        required style="min-width:180px;">
</select>

DEMO

Vous devriez penser à redéfinir votre modèle comme cela pour utiliser ng-options. Lorsque nous utilisons <select>, il n'y a qu'un élément sélectionné et cet élément doit être une propriété de $scope référençant un élément de la liste => nous n'avons pas besoin de dupliquer une propriété supplémentaire avec "active" et "inactive" pour tous les objets.

La conception de votre modèle actuel est logique lorsqu'il y a plus d'un élément sélectionné, mais s'il en existe plus d'un, nous devrions utiliser une liste de cases à cocher au lieu de <select>

Si vous voulez lier avec Id, essayez ceci:

<select ng-model="selectedFinancialId" ng-options="c.id as c.financial_year for c in account_year"
        required style="min-width:180px;">
</select>

DEMO

9
Khanh TO

L'option vide est générée lorsqu'une valeur référencée par ng-model n'existe pas dans un ensemble d'options passé à ng-options.

Vous pouvez trouver la réponse complète + exemple sur stackoverflow. voici le lien

METTRE À JOUR:

voici un exemple:

 <select ng-model="newItem.financial_year_id" required style="min-width:180px;">
   <option ng-repeat="financial in account_year" value="{{financial.id}}" ng-selected="financial.status=='Active'">{{financial.financial_year}}</option>
</select>

dans le contrôleur:

$scope.newItem={};
$scope.account_year=[{id:1,financial_year:"2013-2014",status:"Active"},
                     {id:2,financial_year:"2014-2015",status:"Inactive"}] 
//remove empty option
$scope.newItem.financial_year_id=$scope.account_year[0].id;

exemple live: http://jsfiddle.net/choroshin/5YDJW/7/

19
Alex Choroshin

Ng-option est aussi un bon moyen. Mais si vous voulez vraiment ng-repeat, utilisez-le comme ceci. 

  $scope.newItem.financial_year_id=" ";

Initialisez la variable lorsque vous démarrez le contrôleur. Si vous ne l'initialisez pas, alors cela prend comme indéfini. Donc, la première valeur vide est présente. 

0
Anbu