AngularJS - Ustaw domyślną wartość dla wyboru wewnątrz powtórzenia ng

Question

Mam do czynienia z problemem z AngularJS - nie jestem w stanie wyświetlić wybranej wartości w <select>.

Oto mój przypadek użycia:

mam widok, który rozpoczyna się przez NG-repeat, aby wyświetlić elementy. Każdy komponent zawiera opcję wyboru stawki podatku. Podczas tworzenia nowych elementów wygląda dobrze. Ale kiedy edytuję istniejące elementy, faktyczny kod vatRate nie jest wyświetlany w zaznaczeniu, a zamiast tego widzę domyślną opcję "- Wybierz stawkę podatku VAT" zamiast wybranego podatku VAT.

Mój model zawiera tylko identyfikator stawki kadzi.

Za pomocą jednego komponentu mogę użyć zmiennej w $ scope, aby ustawić aktualną wartość pozycji, ale tutaj mogę mieć wiele komponentów, każdy z nich ma własną stawkę podatku, więc nie jestem pewien jak to zrobić :

Oto mój kod

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

a obiekty:

$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

nie jestem bardzo jasno swoje wymagania, ale jeśli chcesz, aby wyświetlić domyślny wybraną wartość <select>, można użyć ng wybranych. W celu wykorzystania że trzeba mieć domyślną wybrano wartość w kontrolerze jako modelu do <select> i dodać ng wybranych do listy <options ng-selected="{{defaultvalue == value.id}}" ng-repeat="value in vatRates">

Dla kodu i odniesienia Właśnie zmieniła swoją plunker,

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

Mam nadzieję, że to pomoże.

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

Powinieneś ustawić domyślną wartość na ng-model przez kontroler zamiast ng-init. Z docs

Jedyne właściwe wykorzystanie ngInit jest aliasing specjalne właściwości ngRepeat, jak widać na poniższym demo. Poza tym przypadkiem powinieneś używać kontrolerów zamiast ngInit do inicjowania wartości w zakresie.

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

Jest to jedyny sposób, w jaki udało mi się to zrobić, i jest wykonywany, gdy zmienia się inny wybór. (Być może ów przyczyny inne rozwiązania nie działają, proszę zauważyć dodatkowy „” + aby zmusić go do być ciągiem (inaczej nie działa)

w kontrolerze.

$ scope.formData .number_of_persons = "" + $ zasięg.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>