我正在使用来自http://angular-ui.github.com/bootstrap/的手风琴指令,我需要在标题部分有两个按钮。
- 添加 - 在原件下方创建完全相同的手风琴。
- 移除 - 移除手风琴。(第一个手风琴不能被删除 - 禁用删除按钮)。
我是 AngularJS 的新手,请帮助我实现这一目标。
我正在使用来自http://angular-ui.github.com/bootstrap/的手风琴指令,我需要在标题部分有两个按钮。
我是 AngularJS 的新手,请帮助我实现这一目标。
看到一个工作的plunker。
您只需要在控制器中添加和删除功能
$scope.addGroup = function(idx, group, e) {
if (e) {
e.preventDefault();
e.stopPropagation();
}
var newGroup = angular.copy(group);
newGroup.no = $scope.groups.length + 1;
$scope.groups.splice(idx + 1, 0, newGroup);
};
$scope.removeGroup = function(idx, e) {
if (e) {
e.preventDefault();
e.stopPropagation();
}
$scope.groups.splice(idx, 1);
};
和ng-repeat
你的html:
<accordion close-others="oneAtATime">
<accordion-group heading="{{group.title}}" ng-repeat="group in groups">
<accordion-heading>
{{ group.title }} ({{group.no}})
<button class="btn btn-small" ng-click="addGroup($index, group, $event)">+</button>
<button class="btn btn-small" ng-click="removeGroup($index, $event)" ng-show="$index">-</button>
</accordion-heading>
{{group.content}}
</accordion-group>
</accordion>
把这个 e.originalEvent.cancelBubble=true;
$scope.addGroup = function(idx, group, e) {
if (e) {
e.originalEvent.cancelBubble=true;
}
var newGroup = angular.copy(group);
newGroup.no = $scope.groups.length + 1;
$scope.groups.splice(idx + 1, 0, newGroup);
};
$scope.removeGroup = function(idx, e) {
if (e) {
e.originalEvent.cancelBubble=true;
}
$scope.groups.splice(idx, 1);
};