Issue
When I click on an option, the select only shows the option value. Is there a way in angular to show the full path of a select with nested options?
<select>
<optgroup label="A">
<option>1</option>
<option>2</option>
<option>3</option>
</optgroup>
<optgroup label="B">
<option>4</option>
<option>5</option>
<option>6</option>
</optgroup>
</select>
For example if I select option 5, the standard select will show only value "5". I want "B / 5".
Solution
You can achieve it by directive,
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module('myapp', []);
app.directive('getVal', function () {
return function (scope, ele) {
var element = angular.element(ele);
element.change(function (e) {
var y = element.val();
var selected = angular.element(':selected', element);
var optionLabel = selected.closest('optgroup').attr('label');
angular.element('#output').text(optionLabel + ' / ' + y);
});
};
});
</script>
<body ng-app="myapp">
<select get-val>
<optgroup label="A">
<option>1</option>
<option>2</option>
<option>3</option>
</optgroup>
<optgroup label="B">
<option>4</option>
<option>5</option>
<option>6</option>
</optgroup>
</select>
<div id="output"></div>
</body>
</html>
This will output "B / 5" if you select 5.
Answered By - Swapnil Patil
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.