Search code examples
jqueryangularjsbootstrap-ui

How can I put a close (X) button on uib-accordion-group header?

I am trying to put a close (x) button at the uib-accordion-group. The button shows with the below code but nothing happens when you clock the button.

IF I put a button in the body part of uib-accordion it works, but unable to put in the header.

Thanks a lot for your help.

<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);
                    }
       }
}
});
Solution

  • I have made a fiddle for you with your result you need please check 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>

    You can see uib-accordion-heading where you can put your close button

    And also added removing object while clicking the close button