web-dev-qa-db-fra.com

AngularJS - Définit la valeur par défaut lors de la sélection dans une répétition ng

Je suis confronté à un problème avec AngularJS - je ne suis pas en mesure d'afficher la valeur sélectionnée dans un <select>.

Voici mon cas d'utilisation:

J'ai une vue qui commence par une répétition ng pour afficher les composants. Chaque composant contient une sélection pour choisir le taux de TVA. Lors de la création de nouveaux éléments, cela semble bien. Mais lorsque je modifie des éléments existants, le code vatRate réel ne s'affiche pas dans la sélection, et à la place, je vois l'option par défaut "- Sélectionner le taux de TVA -" au lieu de la TVA sélectionnée.

Mon modèle ne contient que l'ID du taux de TVA.

Avec un seul composant, je peux utiliser une variable dans la portée $ pour définir la valeur actuelle de l'élément, mais ici, je peux avoir plusieurs composants, chacun d'eux a son propre taux de TVA, donc je ne sais pas comment faire ici:

Voici mon code

<div ng-repeat="i in items">
   <label>{{i.id}}</label>
   <input ng-model="i.title">
   <select ng-model="i.vatRateId">
      <option value="">--- Select an option ---</option>
      <option ng-repeat="value in vatRates"
              ng-selected="i.vatRateId == value.id"
              value="{{value.id}}">{{value.value}}     
      </option>
   </select>
</div>

Et les objets:

$scope.vatRates = [
    { 'id': 1, 'value' : '20' },
    { 'id': 2, 'value' : '10' },
    { 'id': 3, 'value' : '7' }
];

$scope.items = [
    { 'id': 1, 'title' : 'Title1', 'vatRateId' : '1' },
    { 'id': 2, 'title' : 'Title2', 'vatRateId' : '2' },
    { 'id': 3, 'title' : 'Title3', 'vatRateId' : '3' }
];

Voici une démo en direct pour expliquer mon problème:

Démo sur PLNKR

Je ne suis pas en mesure de définir chaque élément dans la sélection de la bonne valeur.

javascriptangularjsselectangularjs-ng-repeat
12
Pat

Je ne suis pas très clair sur vos besoins, mais si vous souhaitez afficher une valeur sélectionnée par défaut sur <select>, vous pouvez utiliser ng-selected . Pour l'utiliser, vous devez avoir la valeur sélectionnée par défaut dans votre contrôleur en tant que modèle à votre <select> et ajoutez ng-selected à votre <options ng-selected="{{defaultvalue == value.id}}" ng-repeat="value in vatRates">

Pour le code et la référence, je viens de modifier votre plunker,

http://embed.plnkr.co/ZXo8n0jE8r3LsgdhR0QP/preview

J'espère que cela t'aides.

27
Alhuck A

Vous devez définir la valeur par défaut sur le ng-model via le contrôleur au lieu de ng-init. Depuis docs

La seule utilisation appropriée de ngInit est d'aliaser les propriétés spéciales de ngRepeat, comme le montre la démonstration ci-dessous. Outre ce cas, vous devez utiliser des contrôleurs plutôt que ngInit pour initialiser des valeurs sur une étendue.

- Référence de l'API de la directive AngularJS ng-init - Présentation

angular.module('app', [])
.controller('SelectController', function() {

    var selectCtrl = this;
  selectCtrl.values = ["Value 1", "Value 2", "Value 3"];
  selectCtrl.selectedValue = "Value 1";
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="SelectController as selectCtrl">
<select ng-model="selectCtrl.selectedValue"> 
  <option ng-repeat="value in selectCtrl.values" value="{{value}}">{{value}}     </option> 
  </select>
</div>
9
kachhalimbu
<select ng-model="val" ng-init="myval = vals[0]">
    <option ng-repeat="myval in vals" value="{{myval.value}}">{{val.name}}
    </option>
</select>
2
Adam Michalski

C'est la seule façon dont j'ai réussi à le faire, et c'est fait quand une autre sélection change. (c'est peut-être la raison pour laquelle les autres solutions ne fonctionnent pas, veuillez noter le supplément "" + pour le forcer à être une chaîne. (sinon ne fonctionne pas)

Dans le contrôleur:

$scope.formData.number_of_persons = "̲"̲+̲ $scope.numberOfPersons[0].val;

HTML:

<select name="number_of_persons" 
        id="number_of_persons" 
        ng-model="formData.number_of_persons" 
        required>
    <option ng-repeat="option in numberOfPersons" value="{{option.val}}">
        {{option.val}}
    </option>
</select>
2
Chris