角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的引导，去掉最后一个选项卡，整个页面被刷新

回答

相关问题