2017-05-09 101 views
-1

我正試圖在uib-accordion-group上放上一個close(x)按鈕。該按鈕顯示下面的代碼,但是當你按下按鈕時沒有任何反應。如何將關閉(X)按鈕放在uib-accordion-group標題上?

如果我在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); 
        } 
     } 
} 
}); 

回答

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航向,你可以把你的關閉按鈕

而且還增加了刪除對象的同時單擊關閉按鈕

+0

非常感謝您的幫助/ – user3660575

+0

@ user3660575隨時:) –

相關問題