How to update input from dynamic select element

Issue

At the moment, I have a ng-repeat tied to a collection called vm.stations. When a button is pressed, it adds an item into the collection.

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>

each station has distance and walk duration tied to it.

StationName: 'Test Station',

Distance: 15,

WalkDuration: 5

My question is, when a station has been selected, how do i populate vm.stations[$index].distance and vm.stations[$index].walkDuration?

Solution

Use the ng-change directive to update the station info:

<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 = /* ... */;
};

For more information, see

• AngularJS ng-change Directive API Reference

Answered By - georgeawg