Проверка на вкладках начальной загрузки при изменении

Question

Используйте AngularJS и bootsrap 3. У меня есть 3 навигационные вкладки и с панелями на них. Как программно предотвратить переход вкладок на следующую, если пользователь не выбрал клиента или DVD-диски? На боте вкладки 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 с содержимым моей вкладки.

Answer 1

Используя 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');
 }
});