2016-05-06 6 views
1

In this plunk私はAngular UIのドロップダウンを持っています。各<a>要素でng-clickを繰り返さない方法はありますか?角度UIのドロップダウンリストの選択

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

ULにイベントを委任するか、この委任を行うための簡単な指示を作成することをお勧めします。 – dfsq

+0

「デリゲートイベント」の説明を教えてください。 – ps0604

+0

通常のDOMイベントの委任だけです。角に特化したものはありません。しかし、とにかくこのためのディレクティブを作成する方がいいです(プロジェクトにjQueryを使用していない限り、既にそれがあります)。 – dfsq

答えて

2

this plunkerを更新することができませんアクセス権を持っていないとして(ソース$eventを渡す)グローバルNGクリックを使用する方法を示しますと選択

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

selectItem()機能、選択したアンカーのデータ値のプロパティを取得:選択した値としてdata-value属性(ev.target):

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

パーフェクト、コードではなく、ボタンで選択したラベルを設定する方法はありますか? – ps0604

+0

いいえ、信頼できません(アイコンをクリックすると 'Yet another item 'の場合は動作しません)。 – dfsq

+0

しかし、私はアイコンが必要ない、ただのラベル – ps0604

0

私が正しくあなたを理解している場合、あなたがng-repeat

コントローラコードを以下のように書くことができます。

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

私はあなたのplunker

+0

いいえ、この例ではng-repeatは使用できません。私は質問を明確にするように更新しました。 – ps0604

+0

理由がわかりますか? – Raghuveer

+0

javascriptではなく、HTMLマークアップのドロップダウンオプションを維持しようとしているので、 – ps0604

関連する問題