Bootstrap Dropdown 在 Angular ng-repeat 中不起作用 [英] Bootstrap Dropdown not working inside Angular ng-repeat

问题描述

我想我需要休息一下，喝杯茶.

I think I need a break and cup of tea on this one.

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

我有这个代码.当这个片段被放置在重复范围之外时，它工作正常.但是当我点击时，在重复中什么也没有发生.

I have this code. When the this snippet is placed outside the repeat scope it works fine. But inside the repeat nothing happens when I click.

我正在尝试使用 angular-ui，但我不想仅仅为了这项工作而使用它.而且我认为无论如何我都没有正确看待问题.

I'm attempting to use angular-ui but I'd rather not have it just for this job. And I don't think I'm looking at the problem correctly anyway.

推荐答案

我一直在回顾以前的问题，并认为我应该结束这个问题.

I've been looking back over previous questions and thought I'd wrap this one up.

我在这里采用了使用指令的方法.它看起来并不完美，但它现在正在做这项工作.所以在视图中...

I took the approach of using a directive here. It doesn't look perfect but it's doing the job for now. So in the view...

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

这篇关于Bootstrap Dropdown 在 Angular ng-repeat 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！