如何在 uib-accordion-group 标题上放置关闭 (X) 按钮？

Question

我正在尝试在 uib-accordion-group 上放置一个关闭 (x) 按钮。按钮显示以下代码，但当您按下按钮时没有任何反应。

如果我在 uib-accordion 的正文部分放置一个按钮，它可以工作，但无法放入标题中。

非常感谢您的帮助。

<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>&times;</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);
                    }
       }
}
});

Answer 1

我已经为你做了一个小提琴你需要的结果请检查 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' >&times;</a>
      </uib-accordion-heading>
      {{group}}</uib-accordion-group>
</uib-accordion>

您可以看到 uib-accordion-heading 可以放置关闭按钮的位置

并且还添加了在单击关闭按钮时删除对象