角度引导选项卡 - 选择页面加载中调用的函数 [英] angular bootstrap tabs - select function called in page load

查看:28
本文介绍了角度引导选项卡 - 选择页面加载中调用的函数的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有以下格式的角度引导选项卡.(见plunker)

应该在选择选项卡时触发选择功能.但奇怪的是,当页面加载时,第一个选项卡的选择功能被触发.(打印标签选择动态标题 1 加载..)

"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:'动态标题 1', content:'动态内容 1' },{ title:'动态标题 2', content:'动态内容 2' },{ title:'动态标题 3', content:'动态内容 3' }];$scope.tabSelect = 函数(标题){console.log("选项卡选择"+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"><头><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="样式表"><身体><div ng-controller="TabsDemoCtrl"><标签集><tab ng-repeat="tab in tabs" Heading="{{tab.title}}" active="tab.active" disable="tab.disabled" select="tabSelect(tab.title)">{{tab.content}}</tab></tabset>

</html>

解决方案

将您的选择更改为 ng-click,如下所示:

I have the angular bootstrap tabs in the following format. (see the 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..)

"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>

解决方案

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)">

这篇关于角度引导选项卡 - 选择页面加载中调用的函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆