AngularJS - установить значение по умолчанию для выбора внутри ng-repeat

Я столкнулся с проблемой с AngularJS - я не могу отобразить выбранное значение в <select>.

Вот мой прецедент:

У меня есть представление, которое начинается с ng-repeat для отображения компонентов. Каждый компонент содержит выбор для выбора скорости обмена. При создании новых элементов это выглядит отлично. Но когда я редактирую существующие элементы, фактический код vatRate не отображается в select, и вместо этого я вижу вариант по умолчанию "- Выберите VAT Rate" - вместо выбранного НДС.

Моя модель содержит только Id of the vat Rate.

В одном компоненте я могу использовать переменную в $scope для установки текущего значения элемента, но здесь у меня может быть несколько компонентов, каждый из которых имеет свою собственную частоту ватт, поэтому я не уверен, как это сделать здесь:

Вот мой код

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

И объекты:

$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' }
];

Демо

Ответ 1

Я не очень четко понимаю ваши требования, но если вы хотите отобразить выбранное по умолчанию значение <select>, вы можете использовать ng-selected. Чтобы использовать это, вам нужно иметь выбранное по умолчанию значение в вашем контроллере как модель для <select> и добавить ng-selected к вашему <options ng-selected="{{defaultvalue == value.id}}" ng-repeat="value in vatRates">

Для кода и ссылки я просто изменил ваш плукер,

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

Надеюсь, что это поможет.

Ответ 2

Вы должны установить значение по умолчанию на ng-model через контроллер вместо ng-init. Из docs

Единственное подходящее использование ngInit - это для сглаживания специальных свойств ngRepeat, как показано в демонстрации ниже. Помимо этого случая, вы должны использовать контроллеры вместо ngInit для инициализации значений в области.

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>

Ответ 3

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

Ответ 4

Это единственный способ, которым я это сделал, и его выполнение при изменении другого выбора. (возможно, причина в том, что другие решения не работают, обратите внимание на дополнительную "+" /, чтобы заставить ее быть строкой. (в противном случае она не работает)

В контроллере:

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