#angularjs #tabs
#angularjs #вкладки
Вопрос:
У меня есть список ролей (в массиве) и отображается список в виде вкладок (который содержит динамическое количество ролей).
Я хочу автоматически перейти к следующей вкладке (т. Е. Следующей форме) после успешного заполнения первой формы.
Как я могу это сделать?
$scope.array = ["Actor", "Singer", "Lyricist"];
Итак, длина моего массива равна 3, и я буду отображать только актера, певца и автора текстов в виде вкладок.
<li ng-class="{active:isSelected(1)}" ng-if="roleActor==true"class="myli"><a href ng-click="getActorInfo()">Actor</a></li>
<li ng-class="{active:isSelected(2)}" ng-if="roleDirector==true"class="myli"><a href ng-click="getDirectorInfo()">Director</a></li>
<li ng-class="{active:isSelected(3)}" ng-if="roleSinger==true"class="myli"><a href ng-click="getSingerInfo()">Singer</a></li>
<li ng-class="{active:isSelected(4)}" ng-if="roleLyricist==true"class="myli"><a href ng-click="getLyricistInfo()">Lyricist</a></li>
Как я могу перейти ко второй вкладке, когда я отправил первую форму (tab) и получил сообщение об успешном завершении.
<div class="panel-body newPanelBody" ng-if="actor amp;amp; !director amp;amp; !singer amp;amp; !lyricist>
<h4><b>Please enter your mandatory details</b></h4>
<hr width="90%" style="border-color: black; margin-left: 10px;">
<form name="tForm" role="form" data-ng-init="resp()" ng-submit="savePostProfile()" novalidate>
/* My form here */
</form>
</div>
<div class="panel-body newPanelBody" ng-if=" director amp;amp; !actor amp;amp; !singer amp;amp; !lyricist>
<h4><b>Please enter your mandatory details</b></h4>
<hr width="90%" style="border-color: black; margin-left: 10px;">
<form name="tForm" role="form" data-ng-init="resp()" ng-submit="savePostProfile()" novalidate>
/* My form here */
</form>
</div>
<div class="panel-body newPanelBody" ng-if=" singer amp;amp; !actor amp;amp; !director amp;amp; !lyricist>
<h4><b>Please enter your mandatory details</b></h4>
<hr width="90%" style="border-color: black; margin-left: 10px;">
<form name="tForm" role="form" data-ng-init="resp()" ng-submit="savePostProfile()" novalidate>
/* My form here */
</form>
</div>
<div class="panel-body newPanelBody" ng-if="lyricist amp;amp; !actor amp;amp; !director amp;amp; !singer >
<h4><b>Please enter your mandatory details</b></h4>
<hr width="90%" style="border-color: black; margin-left: 10px;">
<form name="tForm" role="form" data-ng-init="resp()" ng-submit="savePostProfile()" novalidate>
/* My form here */
</form>
</div>
Комментарии:
1. Ваш массив имеет только 3 роли, тогда как ваш html поддерживает 4 роли. Вы пытаетесь отображать только вкладки, указанные в вашем
$scope.array?2. ДА. Я пробовал так, но для меня переход по одним вкладкам выполняется, а страницы не остаются в качестве первого массива. jsfiddle.net/kbjwymbq/11
Ответ №1:
сохраните переменную, в которой будет храниться текущая роль, из которой вы можете отобразить ее форму, и после успешной отправки этой формы измените текущую роль на следующую роль, для которой форма должна быть заполнена.
<div ng-if=" selectedRole === 'Director'">
<form name="tForm" role="form" data-ng-init="resp()" ng-submit="savePostProfile()" novalidate>
/* My form here */
</form>
</div>
используйте проверку текущей роли в методе savePostProfile, как указано ниже :
$scope.roles = ["Actor", "Singer", "Lyricist"];
$scope.selectedRole = $scope.roles[0];
$scope.savePostProfile = function(){
var index = $scope.roles.indexOf($scope.selectedRole);
console.log(index);
//add this after save success
if(index<$scope.roles.length-1){
$scope.selectedRole = $scope.roles[index 1];
console.log( $scope.selectedRole);
}
else{
$scope.selectedRole = $scope.roles[0];///will go back to actor form or add anything you want
}
};
проверьте plunkr, предоставленный для рабочего решения, я удалил css-классы из вашего кода.