无法使用AngularJS在下拉菜单中设置所选选项

Question

I've this simple dropdown:

<select ng-model="v" ng-options="valve.Brand + ' ' + valve.Model + ' ' + valve.Notes for valve in valves track by valve.ValveId">
    <option value="">--Valves--</option>
</select>

I'm also using a web service to retrieve data from database. This data contains the ValveId that it's the parameter (value) I would like to use to set as selected an option of my dropdown.

I've tried this way from my controller:

$scope.v = $scope.valves[data.ValveId];

But it is not working.

Any suggestion?

Answer 1

Replace your ng-options by:

valve.ValveId as valve.Brand + ' ' + valve.Model + ' ' + valve.Notes for valve in valves

Notice the as key at the beginning, it tells which property should be used as the model value.

The model will now have the ID as the value. Therefore, you can now set it directly:

$scope.v = data.ValveId;