AngularJS - Imposta il valore predefinito su select all'interno di una ng-repeat

Question

Sono di fronte ad un problema con AngularJS - Non sono in grado di visualizzare il valore selezionato in un <select>.

Qui è il mio caso d'uso:

Ho una visione che parte da un ng-repeat per visualizzare i componenti. Ogni componente contiene una selezione per scegliere la velocità della vasca. Quando si creano nuovi oggetti, sembra buono. Ma quando sto modificando gli articoli esistenti, il codice vatRate effettivo non viene visualizzato nella selezione, e invece vedo l'opzione predefinita "- Seleziona tariffa IVA -" invece dell'IVA selezionata.

Il mio modello contiene solo l'Id della tariffa della vasca.

Con un singolo componente, posso utilizzare una variabile in $ scope per impostare il valore corrente dell'articolo, ma qui posso avere più componenti, ognuno di essi ha una propria percentuale di IVA, quindi non sono sicuro di come farlo qui :

Ecco il mio codice

<div ng-repeat="c in components" ng-form="vatForm"> 
    <select name="selectedVatRate" 
      ng-model="vatRate" 
      ng-init="vatRate = v.id" 
      ng-change="updateVatRate(c, selectedVatRate)" 
      ng-options="v.id for v in vatRates track by v.id"> 
    <option value="">-- Select VAT Rate --</option> 
    </select> 
</div> 

E gli oggetti:

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

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

Demo

Answer 1

Io non sono molto chiare circa il vostro requisito, ma se si desidera visualizzare un valore selezionato di default per <select>, è possibile utilizzare ng-selezionato. Per poter utilizzare che è necessario avere predefinito valore selezionato nel controller come un modelloal vostro <select> e aggiungere ng-selezionato al <options ng-selected="{{defaultvalue == value.id}}" ng-repeat="value in vatRates">

Per il codice e riferimento ho appena alterazione plunker,

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

Spero che questo aiuti.

Answer 2

<select ng-model="val" ng-init="myval = vals[0]"> 
      <option ng-repeat="myval in vals" value="{{myval.value}}">{{val.name}}</option> 
</select> 

Answer 3

È necessario impostare il valore predefinito su ng-model tramite controller anziché ng-init. Dal docs

L'unico uso appropriato di ngInit è per aliasing proprietà speciali di ngRepeat, come si è visto nella demo di seguito. Oltre a questo caso, è necessario utilizzare i controller anziché ngInit per inizializzare i valori su un ambito.

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>

Answer 4

Questo è l'unico modo in cui sono riuscito a farlo, e viene eseguito quando cambia un'altra selezione. (Forse questo è la causa di altre soluzioni non funzionano, si prega di notare l'extra "" + per forzarlo ad essere una stringa (altrimenti non funziona)

Nel controllore:.

$ 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>