如何在 uib-accordion-group header 上放置一个关闭 (X) 按钮?
How can I put a close (X) button on uib-accordion-group header?
我正在尝试在 uib-accordion-group 处放置一个关闭 (x) 按钮。该按钮显示以下代码,但当您按下按钮时没有任何反应。
如果我在 uib-accordion 的 body 部分放置一个按钮,它可以工作,但无法放入 header.
非常感谢您的帮助。
<div ng-controller="myController" >
<script type="text/ng-template" id="group-template.html">
<div class="panel-heading">
<h4 class="panel-title" style="color:#fa39c3">
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
<span uib-accordion-header ng-class="{'text-muted': isDisabled}">
{{heading}}
</span>
</a>
<button type="button" class="close" aria-label="Close" ng- click="$parent.remove_fruit(name)">
<span>×</span>
</button>
</h4>
</div>
<div class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" style="text-align: right" ng-transclude></div>
</div>
<div ng-repeat="name in names">
<uib-accordion close-others="oneAtATime">
<div uib-accordion-group class="panel-default" is-open="status.isCustomHeaderOpen" template-url="group-template.html">
<uib-accordion-heading>
{{name}}
</uib-accordion-heading>
</div>
</uib-accordion>
</div>
var myApp = angular.module('myApp',['ui.bootstrap', 'ngAnimate',
'ngTouch']);
myApp.controller('myController', function myController($scope) {
$scope.names = ['apple','banana','orange'];
$scope.remove_fruit = function(name){
window.alert(name);
for (var i = 0; i < $scope.names.length; i++) {
if ($scope.names[i]==name) {
$scope.names.splice(i,1);
}
}
}
});
我已经为你做了一个fiddle你需要的结果请检查
https://jsfiddle.net/athulnair/6c5rddt6/
<uib-accordion close-others="oneAtATime">
<uib-accordion-group ng-repeat="group in names"><uib-accordion-heading>
{{group}} <a ng-click="removeElement(group)" class="pull-right" stop-event='click' >×</a>
</uib-accordion-heading>
{{group}}</uib-accordion-group>
</uib-accordion>
您可以看到可以放置关闭按钮的 uib-accordion-heading
并且还添加了单击关闭按钮时删除对象
我正在尝试在 uib-accordion-group 处放置一个关闭 (x) 按钮。该按钮显示以下代码,但当您按下按钮时没有任何反应。
如果我在 uib-accordion 的 body 部分放置一个按钮,它可以工作,但无法放入 header.
非常感谢您的帮助。
<div ng-controller="myController" >
<script type="text/ng-template" id="group-template.html">
<div class="panel-heading">
<h4 class="panel-title" style="color:#fa39c3">
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
<span uib-accordion-header ng-class="{'text-muted': isDisabled}">
{{heading}}
</span>
</a>
<button type="button" class="close" aria-label="Close" ng- click="$parent.remove_fruit(name)">
<span>×</span>
</button>
</h4>
</div>
<div class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" style="text-align: right" ng-transclude></div>
</div>
<div ng-repeat="name in names">
<uib-accordion close-others="oneAtATime">
<div uib-accordion-group class="panel-default" is-open="status.isCustomHeaderOpen" template-url="group-template.html">
<uib-accordion-heading>
{{name}}
</uib-accordion-heading>
</div>
</uib-accordion>
</div>
var myApp = angular.module('myApp',['ui.bootstrap', 'ngAnimate',
'ngTouch']);
myApp.controller('myController', function myController($scope) {
$scope.names = ['apple','banana','orange'];
$scope.remove_fruit = function(name){
window.alert(name);
for (var i = 0; i < $scope.names.length; i++) {
if ($scope.names[i]==name) {
$scope.names.splice(i,1);
}
}
}
});
我已经为你做了一个fiddle你需要的结果请检查 https://jsfiddle.net/athulnair/6c5rddt6/
<uib-accordion close-others="oneAtATime">
<uib-accordion-group ng-repeat="group in names"><uib-accordion-heading>
{{group}} <a ng-click="removeElement(group)" class="pull-right" stop-event='click' >×</a>
</uib-accordion-heading>
{{group}}</uib-accordion-group>
</uib-accordion>
您可以看到可以放置关闭按钮的 uib-accordion-heading
并且还添加了单击关闭按钮时删除对象