I have the angular bootstrap tabs in the following format. (see the plunker)
我有以下格式的角度引导选项卡。 （参见plunker）
The select function is supposed to trigger when the tabs are selected. But strangely, when the page is loaded, the very first tab's select function gets triggered. (prints tab selected Dynamic Title 1 onload..)
选择选项卡时，应该触发select函数。但奇怪的是，当页面加载时，第一个选项卡的选择功能被触发。 （打印选项卡选择动态标题1 onload ..）
"http://plnkr.co/edit/vyOOhCdIl7s1Wvou7Dr9?p=preview"
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope) {
$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' }
];
$scope.tabSelect = function(title){
console.log("tab selected "+title);
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="TabsDemoCtrl">
<tabset>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled" select="tabSelect(tab.title)">
{{tab.content}}
</tab>
</tabset>
</div>
</body>
</html>1 个解决方案
#1
2
change your select to ng-click like this:
将您的选择更改为ng-click，如下所示：
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" ng-click="tabSelect(tab.title)">
#1
2
change your select to ng-click like this:
将您的选择更改为ng-click，如下所示：
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" ng-click="tabSelect(tab.title)">