CODEWITHSUNDEEP
javascriptangularjs
Shubham Trivedi
Shubham Trivedi

Reputation: 130

how to retrieve values from the dropdown in angularjs

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.

Upvotes: 0

Views: 57

Answers (2)

Mozhdeh.Hamidi
Mozhdeh.Hamidi

Reputation: 61

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);
    }

Upvotes: 1

yasir_mughal
yasir_mughal

Reputation: 112

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.

Upvotes: 0

Related Questions