Bootstrap Dropdown не работает внутри Angular ng-repeat

Я думаю, что мне нужен перерыв и чашка чая на этом.

<tr ng-repeat="participant in globalData" ng-controller="GlobalDataRowController" ng-class="rowStatus">
    <td>
        <li class="dropdown">
            <a class="dropdown-toggle">
                Click me for a dropdown, yo!
            </a>
            <ul class="dropdown-menu">
                <li ng-repeat="choice in participant.SourceDescriptions">
                    <a>{{choice}}</a>
                </li>
            </ul>
        </li>
....

У меня есть этот код. Когда этот фрагмент находится за пределами области повторения, он работает нормально. Но внутри повтора ничего не происходит, когда я нажимаю.

Я пытаюсь использовать angular-ui, но я бы предпочел не использовать его только для этой работы. И я все равно не думаю, что смотрю на проблему правильно.


drop-down-menu angularjs twitter-bootstrap angular-ui ng-repeat
person Matt Canty    schedule 19.06.2013    source источник
comment
Проверьте источник и посмотрите, не генерируется ли несколько li.   -  person Chandermani    schedule 19.06.2013
comment
Никаких множественных списков не генерируется. Но ng-repeat не влияет на поведение списка данных и не повторяется в исходном коде.   -  person Matt Canty    schedule 19.06.2013

Ответы (2)


arrow_upward
2
arrow_downward

Я оглядывался на предыдущие вопросы и думал, что завершу этот.

Я использовал подход с использованием директивы здесь. Он не выглядит идеальным, но пока работает. Итак, в представлении...

<tr ng-repeat="participant in globalData" ng-controller="GlobalDataRowController" ng-class="rowStatus">
  <td>
    <input input-data-list-dropdown id="xx" input-class="input-xxlarge" ng-model="participant.DisplayName" options="participant.SourceDescriptions">
    ...
  </td>
</tr>

А директива...

.directive('inputDataListDropdown', function () {
    return {
        replace: true,
        scope: { options: '=', ngModel: '=', inputClass: '=', id: '=' },
        template: '<span class="dropdown">' +
                      '<a class="dropdown-toggle">'+
                        '<input type="text" class="inputDataListDropdown" ng-transclude ng-model="ngModel">' +
                      '</a>'+
                      '<ul class="dropdown-menu no-bullets" ng-show="options && options.length > 0">' +
                          '<li ng-repeat="option in options">' +
                            '<a ng-click="$parent.ngModel=option">{{option}}</a>' +
                          '</li>'+
                      '</ul>'+
                  '</span>',
        transclude: 'element',
        link: function ($scope, element, attrs) {
            $("#" + attrs.id + " .inputDataListDropdown").addClass(attrs.inputClass);
        }
    };
});
person Matt Canty    schedule 19.06.2013

arrow_upward

arrow_downward

person    schedule
comment
Кодовые ответы не приветствуются. Пожалуйста, добавьте описание того, почему этот ответ работает или что не так с исходным кодом. - person parakmiakos; 16.12.2014