Question

我正在创建一个表单，当用户按下“下一部分”时，会有一组新的输入字段，这些字段分为8个子表单。现在，根据几个复选框，我想过滤掉之后出现的子表单。假设您当前在第1页有5个复选框，现在，如果您选中任意复选框（假设，复选框编号为4），当单击“下一部分”按钮时，您应该看到相关页面而不是第2页页。

我是AngularJS的新手，正在寻找最佳解决方案。如果解决方案是在JavaScript中，那么它也会起作用，但如果它在AngularJS中，那将更有帮助。感谢

Answer 1

这当然大大简化了，并没有解决验证问题。它演示了如何在用户点击“下一部分”时向用户显示不同内容（＆＃39;页面＆＃39;）的简化版本。

<!doctype html>
<html ng-app='myApp'>
    <head>
        <title>Validation testing</title>
        <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js'></script>
    </head>

    <body>
        <div ng-controller="MyController">

        <form name="form" novalidate>

            <!-- Page 1 Questions-->
            <p ng-if="data.currentPage===1">
                <button type="button" ng-click="data.updateCurrentPage(2)">Next Section</button>
            </p>

            <p ng-if="data.currentPage===1">
                <input
                    type="text"
                    ng-model="data.q1p1"/> Question 1, Page 1
            </p>

            <!-- Page 2 Questions-->
            <p ng-if="data.currentPage===2">
                <button type="button" ng-click="data.updateCurrentPage(3)">Next Section</button>
            </p>

            <p ng-if="data.currentPage===2">
                <input
                    type="text"
                    ng-model="data.q1p2"/> Question 1, Page 2
            </p>

        </form>

        <p ng-if="data.currentPage===3">
                No More questions. 
        </p>

        </div>

        <script type="text/javascript">
            angular.module('myApp', [])
            .controller('MyController', function($scope) { 
                $scope.data = {};

                $scope.data.currentPage = 1;

                 $scope.data.updateCurrentPage = function(x){
                    $scope.data.currentPage = x;
                }
            });
        </script>
    </body>
</html>

使用AngularJS显示/隐藏内容复选框

1 个答案: