angular bootstrap选项卡 - 选择页面加载中调用的函数 [英] angular bootstrap tabs - select function called in page load
本文介绍了angular bootstrap选项卡 - 选择页面加载中调用的函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下格式的角度引导标签。 （参见plunker）
I have the angular bootstrap tabs in the following format. (see the plunker)
选择标签时应该触发选择功能。但奇怪的是，当页面加载时，第一个选项卡的select函数被触发。 （打印选项卡选择动态标题1 onload ..）
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..)
"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>
推荐答案
将您的选择更改为ng-click，如下所示：
change your select to ng-click like this:
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" ng-click="tabSelect(tab.title)">
这篇关于angular bootstrap选项卡 - 选择页面加载中调用的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
