Auto select new added value with ng options and AngularJS
I have a select list that looks like this:
<select
class="form-control"
ng-model="locationList"
ng-options="location.place group by location.type for location in locationlist | orderBy:['type']"
ng-change="addMissingLocation(locationList)">
<option value="">From</option>
</select>
The last item in the ng-options list is called "Add Location" and runs the following function via ng-change:
$scope.addMissingLocation = function (locationList) {
if (locationList.place == "Add location") {
$('.addMissingLocation').modal('show');
}
}
Modal shows, and this allows the user to add a new location using the following function:
$scope.addLocationOtherExtra = function () {
$scope.locationlist.push({ place: $scope.formLocationOther, type: "-Secondary Locations", main:false});
jsonToLocationLocalStorage($scope.locationlist);
$scope.formLocationOther = '';
$('.addMissingLocation').modal('hide');
};
What I'm trying to accomplish is that after the user enters a new location and the modal closes, the selected value in the select is the new added value .
I'm not even sure if this is possible.
Any advice?
+3
source to share
1 answer
After adding a new option, you must tell ngModel to add the option. Try this to select the last option (new):
$scope.addLocationOtherExtra = function () {
$scope.locationlist.push({ place: $scope.formLocationOther, type: "-Secondary Locations", main:false});
$scope.locationList = $scope.locationlist[$scope.locationlist.length - 1];
jsonToLocationLocalStorage($scope.locationlist);
$scope.formLocationOther = '';
$('.addMissingLocation').modal('hide');
};
+3
source to share