Как обновить ввод из динамического c выбора элемента

Question

На данный момент у меня есть ng-repeat, привязанный к коллекции под названием vm.stations. Когда кнопка нажата, она добавляет элемент в коллекцию.

UI

<div class="row" data-ng-repeat="station in vm.stations">
    <select ng-options="s.stationName for s in vm.nearbyStations"
            ng-model="vm.stations[$index].stationUID"
            class="form-control"
            ui-jq="selectpicker">
        <option value="">@L("NotSelected")</option>
    </select>
    <input field class="form-control text-right" type="number" step="1"
           min="0" ng-model="vm.stations[$index].distance">
    <input field class="form-control text-right" type="number" step="1" 
           min="0" ng-model="vm.stations[$index].walkDuration">
</div>

каждая станция привязана к расстоянию и продолжительности ходьбы.

StationName: 'Test Station',

Distance: 15,

WalkDuration: 5

Мой вопрос: как выбрать станцию, как мне заполнить vm.stations[$index].distance и vm.stations[$index].walkDuration?

Answer 1

Используйте директиву ng-change для обновления информации о станции:

<div class="row" data-ng-repeat="station in vm.stations">
    <select ng-options="s.stationName for s in vm.nearbyStations"
            ng-model="vm.stations[$index].stationUID"
            ng-change=vm.updateStationInfo($index)"
            class="form-control"
            ui-jq="selectpicker">
        <option value="">@L("NotSelected")</option>
    </select>
    <input field class="form-control text-right" type="number" step="1"
           min="0" ng-model="vm.stations[$index].distance">
    <input field class="form-control text-right" type="number" step="1" 
           min="0" ng-model="vm.stations[$index].walkDuration">
</div>

vm.updateStationInfo = function(idx) {
    var station = vm.stations[idx];
    //...
    station.distance =     /* ... */;
    station.walkDuration = /* ... */;
};

Для получения дополнительной информации см.

• AngularJS Справочник по директиве API ng-change