角UI的引導，去掉最後一個選項卡，整個頁面被刷新

我加了NG-單擊事件去除UIB-製表heading.Everything的標籤是好的，但是當我刪除了最後一個選項卡，整個頁面被刷新，這不是預期的。這是我的代碼：http://embed.plnkr.co/f0p9uZgKuWTNh3Ss7okY。角UI的引導，去掉最後一個選項卡，整個頁面被刷新

HTML

<head> 
    <link data-require="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" /> 
    <script data-require="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.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="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <div ng-controller="TabsDemoCtrl"> 
     <uib-tabset active="active"> 
     <uib-tab index="0" heading="Static title">Static content</uib-tab> 
     <uib-tab index="$index+1" ng-repeat="tab in tabs track by $index"> 
      <uib-tab-heading> 
        {{tab.title}} 
       <div class="close" aria-label="Close" ng-click="remove($index)"> 
       <span aria-hidden="true">×</span> 
      </div> 
      <!--<div style="width: 10px; height: 10px; background-color: red;" ng-click="removeTab($index)"></div>--> 
      </uib-tab-heading> 


       {{tab.content}} 
      </uib-tab> 
     </uib-tabset> 
    </div> 
    </body> 

</html>

angular.module('app', ['ui.bootstrap']).controller('TabsDemoCtrl', function ($scope, $window) { 
    $scope.tabs = [{ 
      title: 'Dynamic Title 1', 
      content: 'Dynamic content 1' 
     }, 
     { 
      title: 'Dynamic Title 2', 
      content: 'Dynamic content 2', 
     }, 
     { 
      title: 'Dynamic Title 3', 
      content: 'Dynamic content 3', 
     }, 
     { 
      title: 'Dynamic Title 4', 
      content: 'Dynamic content 4', 
     } 
    ]; 

    $scope.remove = function (index) { 
     $scope.tabs.splice(index, 1); 
     $scope.active = $scope.tabs.length; 
    }; 
});

感謝您的幫助。

來源

2017-05-03 Yestin Tian

<uib-tab-heading>本身包裝着<a>標籤，所以它看起來像由於默認鏈接點擊操作而刷新頁面。

如文檔不要

<div ng-click="remove($index, $event)"> 

$scope.remove = function(index, event){ 
    event.preventDefault(); 
    ... 
}

來源

2017-05-03 14:51:42

您需要提供的$事件對象玩NG-單擊說：https://docs.angularjs.org/api/ng/directive/ngClick

的HTML：

ng-click="remove($index, $event)"

JS的

$scope.remove = function (index, e) { 
    $scope.tabs.splice(index, 1); 
    $scope.active = $scope.tabs.length; 
    e.preventDefault(); 
};

下面是你的代碼的工作示例：https://plnkr.co/edit/QXzi1pZb4njydXMo01QA?p=preview

來源

2017-05-03 14:56:32

角UI的引導，去掉最後一個選項卡，整個頁面被刷新

回答

相關問題