Javascript 如何在验证时使用angularJs设置活动选项卡_Javascript_Jquery_Angularjs_Twitter Bootstrap 3

Javascript 如何在验证时使用angularJs设置活动选项卡

javascript jquery angularjs twitter-bootstrap-3

Javascript 如何在验证时使用angularJs设置活动选项卡,javascript,jquery,angularjs,twitter-bootstrap-3,Javascript,Jquery,Angularjs,Twitter Bootstrap 3,在这里，我创建了两个选项卡，我的问题是，当单击提交按钮时，它的第一个选项卡和第二个选项卡将被验证，而不是自动转到第二个选项卡如何操作？谢谢你在高级课程中的帮助 angular.module（'myApp'，[]）.controller（'myCtrl'，['$scope'，function（$scope）{ $scope.msg='notsubmited'； $scope.tab=1； //向控制器添加一些代码 //……在这里 $scope.validateSubmit=函数（）{ //...

在这里，我创建了两个选项卡，我的问题是，当单击提交按钮时，它的第一个选项卡和第二个选项卡将被验证，而不是自动转到第二个选项卡如何操作？谢谢你在高级课程中的帮助

angular.module（'myApp'，[]）.controller（'myCtrl'，['$scope'，function（$scope）{
$scope.msg='notsubmited'；
$scope.tab=1；
//向控制器添加一些代码
//……在这里
$scope.validateSubmit=函数（）{
//...
}
}]);
.btn{
背景颜色：浅蓝色；
光标：指针；
宽度：100px；
边框：1px纯黑；
}

表1
表2
第一页
第二选项卡
如果两个字段都为空或第一个字段不是数字，则不应提交表单
{{msg}}
我认为您不应该使用ng show，因为表单未在display:none元素中提交字段。
您可以尝试以下代码：
CSS代码：
.visible {
    visibility: visible
}

.hidden {
    visibility: hidden
}

HTTML代码：
<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>


表1
表2
第一页
第二选项卡
如果两个字段都为空或第一个字段不是数字，则不应提交表单
{{msg}}
我认为您不应该使用ng show，因为表单未在display:none元素中提交字段。
您可以尝试以下代码：
CSS代码：
.visible {
    visibility: visible
}

.hidden {
    visibility: hidden
}

HTTML代码：
<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>


表1
表2
第一页
第二选项卡
如果两个字段都为空或第一个字段不是数字，则不应提交表单
{{msg}}
提交时发送到tab2的代码在哪里？您的问题不清楚。如果第一个选项卡有效，是否要切换到第二个选项卡？@TJ，是，当第一个选项卡有效时，我要切换到第二个选项卡valid@Nelson由于这两个选项卡只有一个通用的提交按钮，它们是否真的需要是一个
..？提交时将其发送到tab2的代码在哪里？您的问题不清楚。如果第一个选项卡有效，是否要切换到第二个选项卡？@TJ，是，当第一个选项卡有效时，我要切换到第二个选项卡valid@Nelson由于这两个选项卡只有一个通用的提交按钮，它们实际上需要是
..吗。。。？