CODEWITHSUNDEEP
angularjs
ps0604
ps0604

Reputation: 1081

Angular UI dropdown list selection

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>

Upvotes: 1

Views: 2411

Answers (2)

F.Igor
F.Igor

Reputation: 4410

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

Upvotes: 2

Raghuveer
Raghuveer

Reputation: 2637

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

Upvotes: 0

Related Questions