부트 스트랩 드롭 다운이 안쪽에서 작동하지 않음

Question

나는이 컵에서 휴식과 한잔 할 필요가 있다고 생각합니다.

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

나는이 코드를 가지고 있습니다. 이 스 니펫이 반복 범위 밖에 있으면 잘 작동합니다. 하지만 반복을 클릭하면 아무런 반응이 없습니다.

나는 각도 -ui를 사용하려고 시도하지만이 작업에만 사용하지는 않을 것입니다. 그리고 나는 어쨌든 정확하게 문제를보고 있다고 생각하지 않습니다.

Answer 1

나는 이전의 질문을 되돌아 보았고, 나는 이것을 위로 감쌀 것이라고 생각했다.

지시어를 사용하는 방법을 사용했습니다. 그것은 완벽하지는 않지만 지금 당장 일을하고 있습니다.

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

Answer 2

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