bodangly bodangly - 3 months ago 14
AngularJS Question

Having issues with ng-model on select tag, but nowhere else

I have a bunch of ng-model statements, they all are working EXCEPT for the one on the select tag. Essentially, picture a page with a list of devices, when one gets clicked, this function runs:

/* Opens the unit popup page for TX units */
this.openTxUnitPopup = function (row) {
var txUnitForPopup = myScope.txUnits.find(function (unit) {
return unit.mac == row.entity.mac;
});

$scope.config.txUnitForPopup = txUnitForPopup.clone();
$scope.config.showTxPopup = true;
};


That function is designed to set up some data for a modal dialog. The markup with the ng-model statements are below. Again, when the modal pop-up appears, everything is filled out properly based on the model EXCEPT the select box. No channel is selected. I can confirm in the debugger that the channel is being changed by the select box, if I pick a channel and then look at the
txUnitForPopup.channel
it has changed. However, in the view, the select box is never pre-filled with a selected option out like the other form elements are when modal first appears..

<div class="form-column">
<span class="info-label">Part:</span>
<div class="my-form-control">{{config.txUnitForPopup.part}}</div>

<span class="info-label">MAC:</span>
<div class="my-form-control">{{config.txUnitForPopup.mac}}</div>

<span class="info-label">Channel:</span>
<select class="my-form-control" ng-model="config.txUnitForPopup.channel">
<option
ng-repeat="unit in myScope.txUnits"
value="{{unit.channel}}">{{unit.channel}}
</option>
</select>

<span class="info-label">Name:</span>
<input class="my-form-control" ng-model="config.txUnitForPopup.info.name">

<span class="info-label">Manufacturer:</span>
<input class="my-form-control" ng-model="config.txUnitForPopup.info.manufacturer">

<span class="info-label">Model:</span>
<input class="my-form-control" ng-model="config.txUnitForPopup.info.model">

<span class="info-label">Serial #:</span>
<input class="my-form-control" ng-model="config.txUnitForPopup.info.serial">
</div>

Answer

You need to use ng-selected to set previously selected value to dropdown list like this

                 <select class="my-form-control" ng-model="config.txUnitForPopup.channel">
                        <option
                                ng-repeat="unit in myScope.txUnits"
                                ng-selected="unit.channel == config.txUnitForPopup.channel"
                                value="{{unit.channel}}">{{unit.channel}}
                        </option>
                    </select>