Issue
I want to dynamically manage the number of options under a select tag, and automatically select the last added option after updating the options.
Here is what I tried :
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.0.x"
src="http://code.angularjs.org/1.0.7/angular.min.js"
data-semver="1.0.7"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<select ng-model="selectedOption">
<option value="">-----Select an option-----</option>
<option ng-repeat="option in options" value="{{option.value}}">
{{option.name}}
</option>
</select>
<button ng-click="addOption()">Add option</button>
</body>
</html>
When you add an option, the select switch to a non existant value. It seems like the select value update is resolved before the options update.
Does anyone have any idea on how i could fix that ?
Solution
You state: I want to dynamically manage the number of options under a select tag, and automatically select the last added option after updating the options.
You can do this by changing your HTML like so (EDITed after comment):
<option ng-repeat="option in options" value="{{option.value}}" ng-selected="option.value==options.length-1"> {{option.name}}</option>
More information on the ng-selected directive
Line 19 in your accompanying js should also be deleted - this line currently reads like so:
$scope.selectedOption = $scope.options.length - 1;
Answered By - Ram Rajamony
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.