CODEWITHSUNDEEP
javascriptangularjs
Merbin Joe
Merbin Joe

Reputation: 688

How to get the dropdown list box text using angularjs?

How can I get the dropdown list box selected text value, and find the source of the function calling(where from the function was called).

<div ng-controller="cntrl">
<select id="dflfnt"  ng-change="opfun()" ng-model='mddl1' ng-options='option.value as option.name for option in ddl1Options.data'> 
</select>

<select id="3dfnt" ng-model='mddl2' ng-change="opfun()" ng-options="option.value as option.name for option in ddl2option.data">

</select>
</div>

<script>
function cntrl($scope)
{
$scope.ddl1Options={
data:[
{value:"Georgia, serif",name:"Style 1"},
{value:"'Palatino Linotype', 'Book Antiqua', Palatino, serif",name:"Style 2"}
]};

$scope.ddl2option={
data:[
{value:"font-effect-anaglyph",name:"anaglyph"},
{value:"font-effect-brick-sign",name:"brick-sign"},
{value:"font-effect-canvas-print",name:"canvas-print"},
{value:"font-effect-crackle",name:"crackle"}
]};


    $scope.opfun=function(){            
        alert($scope.mddl1); // Here I can get the value only
    }

}
</script>

In above I want to know where from the opfun() is trigger and get the selected text of the dropdownlistbox.

I am tried to get the text like below.

alert($scope.ddl2option.data[0].name);

But it was display always selected index.

Upvotes: 0

Views: 1556

Answers (2)

Raphael M&#252;ller
Raphael M&#252;ller

Reputation: 2200

I got you a working demo with the $watch directive.

your html is no a little bit lighter: 

<select 
    id="dflfnt"   
    ng-model='mddl1' 
    ng-options='option.name for option in ddl1Options.data'
  ></select>

  <select 
    id="3dfnt" 
    ng-model='mddl2' 
    ng-options="option.name for option in ddl2option.data"
  ></select>

and your controller has full control over if the model changes:

$scope.$watch('mddl1', function(mddl1) {
    console.log(mddl1);
});

if you want to watch booth togheter, just use:

$scope.$watch('mddl1 + mddl2', function(value) {
   //but note this value is concatenated
   console.log(value);

   //you should access the values over the $scope.mddln now
});

Upvotes: 0

Matt Herbstritt
Matt Herbstritt

Reputation: 4862

Not totally sure what you're after but try removing option.value from your ng-options directive.

Is that what you are aiming for ..

Also, you should really consider changing your variable names to something more readable because it makes it really difficult to figure out what is going on with such cryptic variable names.

DEMO

app.js

var app = angular.module('plunker', []);

app.controller('cntrl', cntrl);


function cntrl($scope){

  $scope.ddl1Options = {
    data:[
      {value:"Georgia, serif", name:"Style 1"},
      {value:"'Palatino Linotype', 'Book Antiqua', Palatino, serif", name:"Style 2"}
    ]
  };

  $scope.mddl1 = $scope.ddl1Options.data[0];

  $scope.ddl2option = {
    data:[
      {value:"font-effect-anaglyph",name:"anaglyph"},
      {value:"font-effect-brick-sign",name:"brick-sign"},
      {value:"font-effect-canvas-print",name:"canvas-print"},
      {value:"font-effect-crackle",name:"crackle"}
    ]

  };

  $scope.mddl2 = $scope.ddl2option.data[0];


  $scope.opfun = function(selectedModelValue){            
      //alert(selectedModelValue); // Here I can get the value only
  }

}

index.html

  <select 
    id="dflfnt"  
    ng-change="opfun(mddl1)" 
    ng-model='mddl1' 
    ng-options='option.name for option in ddl1Options.data'
  ></select>

  <select 
    id="3dfnt" 
    ng-model='mddl2' 
    ng-change="opfun(mddl2)" 
    ng-options="option.name for option in ddl2option.data"
  ></select>

  <h5>mddl1</h5>
  <pre>{{mddl1}}</pre>

  <h5>mddl2</h5>
  <pre>{{mddl2}}</pre>

</div>

Upvotes: 1

Related Questions