2016-05-06 2 views
1

In this plunk У меня есть Угловой пользовательский интерфейс. Есть ли способ НЕ повторять ng-click в каждом элементе <a>?Угловой пользовательский интерфейс выпадающего списка выбора

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) и выбора data-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() функции, получая свойство данных значение выбранного якоря (ev.target):

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

Отлично, есть ли способ установить метку, выбранную на кнопке, вместо кода? – ps0604

+0

Нет, это ненадежно (не будет работать для 'Yet another item ', если вы нажмете значок). – dfsq

+0

, но мне не нужен значок, только ярлык – ps0604

0

Если я понял, вы правильно, вы можете написать, как показано ниже с ng-repeat

Controller Код:

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

HTML V МЭН

<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

, потому что я пытаюсь сохранить выпадающие параметры в разметке HTML, а не в javascript. – ps0604

Смежные вопросы