时间戳

首页 > 解决方案 > 在更改时对引导导航选项卡进行验证

angularjs - 在更改时对引导导航选项卡进行验证

问题描述

Usign AngularJS 和 bootsrap 3。我有 3 个导航选项卡，上面有面板。如果用户没有选择客户或 DVD，我如何以编程方式防止选项卡更改为下一个选项卡。在 bot 的 customerSelect 和 dvdSelect 选项卡上，我有一个面板，其中包含用户选择客户的列表，还有一个 dvd 列表。

<div class="row">
    <div class="panel panel-default">
        <ul class="nav nav-tabs">
            <li class="active in"><a data-target="#customerSelect" data-toggle="tab">Customer</a></li>
            <li><a data-target="#dvdSelect" data-toggle="tab">Dvd List</a></li>
            <li><a data-target="#orderDetail" data-toggle="tab">Order Details</a></li>
        </ul>
    </div>
</div>
    <div class="row">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="customerSelect">
            </div>
        </div>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade" id="dvdSelect">
            </div>
        </div>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade" id="orderDetail">
            </div>
        </div>
    </div>

我在标签内容 div 中省略了很多代码。

标签： angularjstwitter-bootstrap

解决方案

使用 JQuery，引导选项卡有 4 个不同的事件：

show.bs.tab // Occurs when the tab is about to be shown.    
shown.bs.tab  //  Occurs when the tab is fully shown (after CSS transitions have completed)  
hide.bs.tab // Occurs when the tab is about to be hidden   
hidden.bs.tab  // Occurs when the tab is fully hidden (after CSS transitions have completed)

您可以使用的伪示例：

$('.nav-tabs a').on('show.bs.tab', function(){
console.log('validation starts...');
if (correct!==true){
    $('#tab1').tab('show');
}else{
    $('#tab2').tab('show');
 }
});

推荐阅读