0

I have this piece of code of dropdown, like this there are more than 1 dropdown, from which i want to get the name of each drop down and its selected value

<div style="display: inline-block;" class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Front-Desk<span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#"> 0</a></li>
      <li><a href="#"> 1</a></li>
      <li><a href="#"> 2</a></li>
      <li><a href="#"> 3</a></li>
      <li><a href="#"> Empty Values</a></li>
    </ul>
</div>

for example: for the above code angularjs should return me 'Front-Desk' with its selected value '2'(say). If there is solution from JQuery then also i would really appreciate the help.

Improve this question

2 Answers 2

Reset to default
1

I think I understood what you want, so your html code should be like below:

<div style="display: inline-block;" class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" ng-click="name='Back-Desk'">Back-Desk<span class="caret"></span></button>
        <ul class="dropdown-menu ">
            <li ng-click="getValue(0)"><a><span> 0</span></a></li>
            <li ng-click="getValue(1)"><a><span> 1</span></a></li>
            <li ng-click="getValue(2)"><a><span> 2</span></a></li>
            <li ng-click="getValue(3)"><a><span> 3</span></a></li>
            <li ng-click="getValue('Empty Values')"><a><span> Empty Values</span></a></li>
        </ul>
    </div>

and your controller should contain this function

    $scope.getValue = function(value) {
        console.log("this is value:",$scope.name, value);
    }
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

yeah, I exactly wanted to do this. Thanks mate for the help
actually, I have total 10 dropdowns like this and for each dropdown, I cannot make separate 10 functions. Is there any way that I can get the dropdown name and value of all 10 in a single function?
yes you can use this function for all drop down just duplicate your html and use another name for button click
yeah, I figured it out, but then also I appreciate the help. @Mozhdeh.Hamidi
0

Hello I think you are new in angular btw:

    <div style="display: inline-block;" class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Front-Desk<span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#"><span ng-model="value"> 0</span></a></li>
      <li><a href="#"><span ng-model="value"> 1</span></a></li>
      <li><a href="#"><span ng-model="value"> 2</span></a></li>
      <li><a href="#"><span ng-model="value"> 3</span></a></li>
      <li><a href="#"><span ng-model="value"> Empty Values</span></a></li>
    </ul>
</div>

In controller you have to declare a variable "$scope.value" in which your selected value will come.

Improve this answer

7 Comments

i declared $scope.value as global in the controller, but then also am not able to see output in console.log()
When you select value from dropdown you need to call function in which you console the value. ` <li><a href="#" ng-click= "clicked(value)"><span ng-model="value"> 0</span></a></li> ` In controller you can check the value.
yes, i have kept a button, upon clicked there is a function running, inside the function i have put console.log()
$("#getdata").click(function(){ console.log($scope.value); });
i used your way still no success.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.