Reputation: 339
Please take a look at this plunkr.
I have a couple of select lists that are filtered based on some simple conditions. There is a list (of Plants) that is dynamically constructed by clicking on the "Add" button. When each row is added, I would like the selects to automatically select the first item in the list. Please bear in mind that there are filters and the items change based on the select list on the top of the form (SalesOrg).
Preferably, I would like to do this without using DOM in the controller.
UPDATE: Have a look at this simpler plunk. Select "Texas" as the state. The city dropdown has been accordingly filtered. The initial selection does not work because the original dropdown variable (DropDownData.Cities) is no longer the source of the select - it has been filtered.
Upvotes: 1
Views: 2778
Reputation: 77910
Just useng-init
like:
<select class="form-control" id="selSalesOrg" ng-model="SelData.SalesOrg"
data-ng-options="salesOrg.id as salesOrg.Description for salesOrg in DropDownData.SalesOrgs"
ng-init="SelData.SalesOrg = DropDownData.SalesOrgs[0].id">
</select>
The fixed PLunker
The second way is instead ng-init
directive add to your controller something like:
$scope.SelData.SalesOrg = DropDownData.SalesOrgs[0].id;
Comment**
Since you use filter actually we can't take first element but first in list after filtering
Upvotes: 1