Twitter bootstrap 引导下拉列表不在内部工作，重复

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

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

点击我的下拉列表，哟！


{{choice}}



....

我有这个密码。当将此代码段放置在重复范围之外时，它可以正常工作。但在重复中，当我点击时，什么也没有发生

---

我正在尝试使用angular ui，但我不希望它仅用于此项工作。我认为我没有正确地看待这个问题。

我已经回顾了以前的问题，并认为我应该结束这个问题

我采取了在这里使用指令的方法。它看起来并不完美，但目前正在发挥作用。所以在我看来

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

指令（'inputDataListDropdown'，函数（）{ 返回{ 替换：正确， 作用域：{options:'='，ngModel:'='，inputClass:'='，id:'='}， 模板：“”+ ''+ '' + ''+ “

”+ “
• ”+ “{{option}}”+ “
”+ “

”+ '', 转移：'元素'， 链接：函数（$scope，element，attrs）{ $（“#”+attrs.id+”.inputDataListDropdown”）.addClass（attrs.inputClass）； } }; });

$scope.drop\u down1=函数（）{
$scope.status={
伊索彭：错
};
$scope.toggled=函数（打开）{
$log.log（'下拉列表现在为：'，打开）；
};
$scope.toggleDropdown=函数（$event）{
$event.preventDefault（）；
$event.stopPropagation（）；
$scope.status.isopen=！$scope.status.isopen；
};
};
按钮下拉列表







身份证件
虚拟机名称
日期
还原类型
状态
按钮
{{x.id}
{{x.vm_name}
{{x.date}
{x.restore_type}
{{x.state}}

检查源代码，查看是否生成了多个li。没有生成多个列表。但是ng repeat不会影响数据列表的行为，并且在源代码中不会重复。不鼓励只使用代码的答案。请添加一些说明，说明为什么这个答案有效，或者原始代码出了什么问题。

<!-- a function -->

 $scope.drop_down1 = function () {


        $scope.status = {
            isopen: false
        };

        $scope.toggled = function(open) {
            $log.log('Dropdown is now: ', open);
        };

        $scope.toggleDropdown = function($event) {
            $event.preventDefault();
            $event.stopPropagation();
            $scope.status.isopen = !$scope.status.isopen;
        };


    };

<!--create view and use ng-include-->

<div class="btn-group" dropdown is-open="status.isopen">

    <button type="button" class="btn btn-primary dropdown-toggle" ng-click="drop_down1()" dropdown-toggle ng-disabled="disabled">
        Button dropdown <span class="caret"></span>
    </button>


    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>




<!-- ng-repeat example -->

<table class="table table-hover">
        <thead>
        <tr>
            <th>id</th>
            <th>vm_name</th>
            <th>date</th>
            <th>restore_type</th>
            <th>state</th>
            <th>Button</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="x in data  | filter:searchFilter | orderBy: 'id' :true">


            <td>{{x.id}}</td>
            <td>{{x.vm_name}}</td>
            <td>{{x.date}}</td>
            <td>{{x.restore_type}}</td>
            <td>{{x.state}}</td>

            <td>

                <div id="ctrl_10_butt" ng-include="'view/view_drop1.html'"></div>

            </td>

   </tr>
        </tbody>
    </table>