2016-05-06 5 views
1

In this plunk Ich habe ein Dropdown-Menü für Angular UI. Gibt es eine Möglichkeit, den ng-Klick in jedem <a> Element NICHT zu wiederholen?Angular UI Dropdown-Listenauswahl

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> 

+0

Delegieren Sie Ereignis an die UL oder besser erstellen Sie einfache Anweisung, um diese Delegation für Sie zu machen. – dfsq

+0

Kannst du mich auf eine Erklärung von "Delegate Event" hinweisen? – ps0604

+0

Nur normale DOM-Ereignisdelegierung. Nichts angular spezifisches. Aber es ist besser, dafür eine Direktive zu erstellen (es sei denn, Sie verwenden jQuery im Projekt, das bereits vorhanden ist). – dfsq

Antwort

2

this plunker zeigt zu aktualisieren, wie ein ng Sie auf (vorbei an der Quelle $event) global nutzen und die Auswahl der data-value Attribut als gewählter Wert:

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

die selectItem() Funktion, die Daten-Wert Eigenschaft ausgewählten Anker bekommen (ev.target):

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

Perfekt, gibt es eine Möglichkeit, das auf der Schaltfläche ausgewählte Label anstelle des Codes zu setzen? – ps0604

+0

Nein, es ist nicht zuverlässig (funktioniert nicht für '', wenn Sie auf das Symbol klicken). – dfsq

+0

aber ich brauche nicht das Symbol, nur das Label – ps0604

0

Wenn ich Sie richtig verstanden Sie wie unten mit ng-repeat

-Controller-Code schreiben:

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

HTML V iew

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

wie ich, dass ich nicht in der Lage kann keinen Zugriff auf Ihre Plunker

+0

Nein, ich kann nicht ng-repeat in diesem Beispiel verwenden. Ich habe die Frage aktualisiert, um klarer zu sein. – ps0604

+0

Darf ich wissen warum? – Raghuveer

+0

, weil ich versuche, die Dropdown-Optionen im HTML-Markup zu halten, nicht im Javascript – ps0604