CODEWITHSUNDEEP
javascriptangularjs
madhur
madhur

Reputation: 1001

Getting the option text for selected option in select list angular js

My select list data looks like this

{
  123: 'abc',
  234: 'bcd',
  .
  .
}

I am using ng-options in template to render this like

<select ng-model="myOption" ng-option="key as value for (key, value) in data"></select>

Now I want to get the option text for selected option in js controller

Is it possible?

PS- I can't change the data structure of data for select list, so make it a object of objects as shown below is out of question 

{
 {
   name: 'abc',
   value: 123
 },
 {
   name: 'bcd',
   value: 234
 }
}

EDIT: I still want to be able to access the selected key i.e. 123 or 234

Upvotes: 1

Views: 1141

Answers (1)

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41397

you can use ng-change and implement a function to get the value by key 

<div>
    <select ng-model="myOption" ng-options="key as value for (key, value) in data" ng-change="getVal(myOption)"></select>

    {{selectVal}}
</div>

$scope.getVal = function(val){
    $scope.selectVal = $scope.data[val]
}

not that its ng-options with s

demo

angular.module("app",[])
.controller("ctrl",function($scope){
$scope.data = {
  123: 'abc',
  234: 'bcd', 
}
$scope.getVal = function(val){
    $scope.selectVal = $scope.data[val]
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <select ng-model="myOption" ng-options="key as value for (key, value) in data" ng-change="getVal(myOption)"></select>
{{selectVal}}
</div>

Upvotes: 2

Related Questions