uib-accordion with close button

testing uib-accordion with close button

by ifonecoder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-touch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css">
<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>
  </script>

<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>

</div>

JavaScript

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