这里我创建了两个选项卡，我的问题是当单击提交按钮时其验证第一个选项卡并且不会自动转到第二个选项卡怎么办？感谢您在高级方面的帮助
angular.module('myApp', []).controller('myCtrl', ['$scope', function($scope){
$scope.msg='not submitted';
$scope.tab=1;
//adding some code to your controller
//...here
$scope.validateSubmit = function(){
//...
}
}]);.btn{
background-color:lightblue;
cursor: pointer;
width: 100px;
border: 1px solid black;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller='myCtrl'>
<form name='myForm' ng-submit="msg='submited'">
<span class="btn" ng-click="tab=1">tab 1</span>
<span class="btn" ng-click="tab=2">tab 2</span>
<div>
<ng-form ng-show="tab==1">
<label>1 st tab</label>
<input type="number" ng-model="input2" required="required" />
</ng-form>
<ng-form ng-show="tab==2">
<label>2nd tab</label>
<input type="text" ng-model="input3" required="required" />
</ng-form>
</div>
<p>Form shouldn't submit if both fields are empty or if the first is not a number.</p>
<input type="submit" value="submit" ng-click="validateSubmit()"/>
<form>
<p>{{msg}}</p>
</div>
</body>最佳答案
我认为你不应该使用 ng-show 因为表单不会在 display:none 元素内提交字段。 您可以尝试以下代码:
CSS 代码:
.visible {
visibility: visible
}
.hidden {
visibility: hidden
}
HTML 代码:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller='myCtrl'>
<form name='myForm' ng-submit="msg='submited'">
<span class="btn" ng-click="tab=1">tab 1</span>
<span class="btn" ng-click="tab=2">tab 2</span>
<div>
<ng-form ng-class="tab==1 ? 'visible' : 'hidden'">
<label>1 st tab</label>
<input type="number" ng-model="input2" required="required" />
</ng-form>
<ng-form ng-class="tab==2 ? 'visible' : 'hidden'">
<label>2nd tab</label>
<input type="text" ng-model="input3" required="required" />
</ng-form>
</div>
<p>Form shouldn't submit if both fields are empty or if the first is not a number.</p>
<input type="submit" value="submit" ng-click="validateSubmit()"/>
<form>
<p>{{msg}}</p>
</div>
</body>
关于javascript - 如何在验证时使用 angularJs 设置事件选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35448571/