引导下拉没有棱角NG重复内部组件 [英] 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>
....
我有这样的code。当这个片段被放在重复范围之外,它工作正常。但在重复里面没有任何反应,当我点击。
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.
我试图用角的用户界面,但我宁愿没有,它只是这项工作。而且我不认为我在看问题的正确反正。
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.
推荐答案
我已经回头了previous问题,我想我会换这一个。
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);
}
};
});
这篇关于引导下拉没有棱角NG重复内部组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!