Angular UI dropdown list selection

Question

In this plunk I have an Angular UI dropdown. Is there a way NOT to repeat the ng-click in each <a> element?

HTML

<div class="btn-group" uib-dropdown>
  <button id="btn-append-to-body" type="button" class="btn btn-primary" 
      uib-dropdown-toggle>
      {{selection}} <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" uib-dropdown-menu="" role="menu" 
        aria-labelledby="btn-append-to-body">
    <li role="menuitem">
      <a href="#" ng-click="selectItem('1')">The first item</a>
    </li>
    <li role="menuitem">
      <a href="#" ng-click="selectItem('2')">Another item</a>
    </li>
    <li role="menuitem">
      <a href="#" ng-click="selectItem('3')">Yet another item</a>
    </li>
 </ul>

Delegate event to the UL or better create simple directive to make this delegation for you. — dfsq
– dfsq, Commented May 6, 2016 at 13:05
Just normal DOM event delegation. Nothing angular specific. But it's better to create directive for this anyway (unless you use jQuery in the project, which already has it). — dfsq
– dfsq, Commented May 6, 2016 at 13:12

F.Igor · Accepted Answer · 2016-05-06 13:27:07Z

2

this plunker shows how to use a global ng-click (passing the source $event) and selecting the data-value attribute as selected value :

<ul class="dropdown-menu" ng-click="selectItem($event)" uib-dropdown-menu="" role="menu" aria-labelledby="btn-append-to-body">
           <li role="menuitem">
              <a href="#" data-value="1" >The first item</a>
            </li>
            <li role="menuitem">
              <a href="#" data-value="2">Another item</a>
            </li>
            <li role="menuitem">
              <a href="#" data-value="3">Yet another item</a>
            </li>
        </ul>

The selectItem() function , getting the data-value property of selected anchor (ev.target):

$scope.selectItem = function(ev) {
    $scope.selection = ev.target.dataset.value
};

edited May 6, 2016 at 13:27

answered May 6, 2016 at 13:22

F.Igor

4,5401 gold badge25 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ps0604 Over a year ago

Perfect, is there a way to set the label selected on the button, instead of the code?

dfsq Over a year ago

No, it's not reliable (will not work for <a href="#" data-value="3">Yet another item <i class="fa fa-star"></i></a> if you click icon).

ps0604 Over a year ago

but I don't need the icon, just the label

dfsq Over a year ago

Sure it will work for this structure. Not reliable means that it can break even if CSS changes (maring, for example). You also can't change HTML, like adding anything inside labels. If it's okay with you, then fine. Just be aware about limitations.

F.Igor Over a year ago

To set the value using the text of the link you can use $scope.selection = ev.target.textContent (plnkr.co/edit/7XW5eduSTreCkNLfimbC?p=preview)

Raghuveer · Accepted Answer · 2016-05-06 13:01:35Z

0

If I understood you correctly you can write like below with ng-repeat

Controller Code:

//Your controller logic
$scope.selectItems = ["First Item", "Another Item", "One More Item"]
//some more logic in your controller

HTML View

<ul class="dropdown-menu" uib-dropdown-menu="" role="menu" aria-labelledby="btn-append-to-body" ng-repeat="(key, value) in selectItems ">
      <li role="menuitem">
        <a href="#" ng-click="selectItem('key')">{{value}}</a>
      </li>
    </ul>

as I don't have access I can't able to update your plunker

edited May 6, 2016 at 13:01

answered May 6, 2016 at 12:45

Raghuveer

2,6273 gold badges31 silver badges61 bronze badges

7 Comments

ps0604 Over a year ago

No, I cannot use ng-repeat in this example. I updated the question to be clearer.

ps0604 Over a year ago

because I'm trying to keep the dropdown options in the HTML markup, not in the javascript

Raghuveer Over a year ago

What do you mean by keep the dropdown options in the HTML markup, not in the javascript

Raghuveer Over a year ago

How you will pass data from one element to another element with out using javascript?

ps0604 Over a year ago

I will use javascript to get the selected element, but the list of options I prefer to mantain in the HTML instead of an array in the javascript

|

Collectives™ on Stack Overflow

Angular UI dropdown list selection

2 Answers 2

5 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related