我想我需要休息一杯茶。
<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,但我宁愿不仅仅是为了这份工作。而且我认为无论如何我都没有正确地看待问题。
答案 0 :(得分:2)
我一直在回顾以前的问题,并认为我会把这个问题包起来。
我采取了在这里使用指令的方法。它看起来并不完美,但它现在正在完成这项工作。所以在视图中......
<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);
}
};
});
答案 1 :(得分:0)
<!-- 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>