Показать / Скрыть флажок содержимого с помощью AngularJS

Question

Показать / Скрыть флажок содержимого с помощью AngularJS

0

Я делаю форму, и когда пользователь нажимает на "Следующий раздел", новый набор полей ввода, которые классифицируются по 8 подформам. Теперь, основываясь на нескольких флажках, я хочу отфильтровать, какая суб-форма появится после этого. Предположим, есть 5 флажков, которые вы сейчас на первой странице, теперь, если вы установите флажок (предположим, флажок № 4), при нажатии кнопки "Следующий раздел" вы должны увидеть соответствующую страницу, а не вторую стр.

Я новичок в AngularJS и ищу оптимальное решение. Если решение находится в JavaScript, то и оно будет работать, но если оно будет в AngularJS, это будет более полезно. благодаря

Sahil Singh 02 июль 2016, в 15:10

Источник

Теги:

javascript

angularjs

checkbox

1 ответ

Ещё вопросы

Gerald · Answer 1 · 2016-07-02T12-01-00.000Z

Это, конечно, значительно упрощается и не решает проблему проверки. Он демонстрирует упрощенную версию того, как вы можете отображать разные материалы ("страницы") пользователям, когда они нажимают "Следующий раздел".

<!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>