Question

这里我创建了两个选项卡，我的问题是在点击提交按钮时验证第一个选项卡并且它不会自动转到第二个选项卡怎么办？感谢您在Advanced

中的帮助

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>

Answer 1

我认为你不应该使用ng-show，因为form不在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>

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

1 个答案: