javascript - How to get the dropdown list box text using angularjs? -
how can dropdown list box selected text value, , find source of function calling(where function called).
<div ng-controller="cntrl"> <select id="dflfnt" ng-change="opfun()" ng-model='mddl1' ng-options='option.value option.name option in ddl1options.data'> </select> <select id="3dfnt" ng-model='mddl2' ng-change="opfun()" ng-options="option.value option.name 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 can value } } </script>
in above want know opfun() trigger , selected text of dropdownlistbox.
i tried text below.
alert($scope.ddl2option.data[0].name);
but display selected index.
not totally sure you're after try removing option.value
ng-options
directive.
is aiming ..
also, should consider changing variable names more readable because makes difficult figure out going on such cryptic variable names.
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 can value } }
index.html
<select id="dflfnt" ng-change="opfun(mddl1)" ng-model='mddl1' ng-options='option.name option in ddl1options.data' ></select> <select id="3dfnt" ng-model='mddl2' ng-change="opfun(mddl2)" ng-options="option.name option in ddl2option.data" ></select> <h5>mddl1</h5> <pre>{{mddl1}}</pre> <h5>mddl2</h5> <pre>{{mddl2}}</pre> </div>
Comments
Post a Comment