标题部分中带有按钮的Angular UI手风琴 [英] Angular UI accordion with buttons in the header part
本文介绍了标题部分中带有按钮的Angular UI手风琴的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用来自 http://angular-ui.github.com/bootstrap/的手风琴指令,并且我需要在标题部分中有两个按钮.
- 添加-在原始音调的下方创建完全相同的手风琴.
- 删除-删除手风琴. (第一根手风琴无法取下- 禁用删除"按钮).
我是AngularJS的新手,请帮助我实现这一目标.
解决方案
查看可正常运行的朋克车.>
您只需要在控制器中添加和删除功能
$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);
};
和html的ng-repeat
:
<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>
I am using the accordion directive from http://angular-ui.github.com/bootstrap/ and I need to have two buttons in the header part.
- Add - Create exactly same accordion below the original.
- Remove - Remove the accordion. (the first accordion can not be removed - disable the Remove button).
I am new to AngularJS and please help me to achieve this.
解决方案
See a working plunker.
You just need a add and remove function in your controller
$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);
};
and a ng-repeat
for your 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>
这篇关于标题部分中带有按钮的Angular UI手风琴的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文