When a button is clicked, I want to retrieve the key value of the selected item from an md-select dropdown list that is bound with data using ng-repeat.
Below is my JavaScript code:
$scope.checklist= [{ "val": 1, "txt": "one" }, { "val": 2,
"txt": "two" }, { "val": 3, "txt": "three" }, { "val": 4,
"txt": "four" }, { "val": 5, "txt": "five" }, { "val": 6,
"txt": "six" }, { "val": 7, "txt": "seven" }, { "val": 8,
"txt": "eight" }, { "val": 9, "txt": "nine" }, { "val": 10,
"txt": "ten" }, { "val": 11, "txt": "eleven" }];
$scope.searchTerm;
$scope.clearSearchTerm = function () {
$scope.searchTerm = '';
};
$scope.getDropdwnSelectedValue = function (val) {
alert(val);
}
Here is the HTML code:
<div layout="row">
<md-input-container>
<md-select ng-model="selected.key" md-on-close="clearSearchTerm()" multiple="" style="width:300px;">
<md-select-header>
<input ng-model="searchTerm" type="search" placeholder="Search for ..">
</md-select-header>
<md-optgroup label="list">
<md-option ng-value="chkLst.txt" ng-repeat="chkLst in checklist|
filter:searchTerm" >{{chkLst.txt}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
</div>
<md-button class="md-raised md-primary" ng-click="getDropdwnSelectedValue (selected)">Get Value</md-button>