AngularJS enables the creation of a checkbox that toggles the visibility of content

Question

AngularJS enables the creation of a checkbox that toggles the visibility of content

As I develop a form, selecting 'Next Section' will reveal a new group of input fields organized into 8 sub-forms. Through checkboxes, I aim to dynamically display the relevant sub-form based on user selections. For example, if there are 5 checkboxes and you're on the first page, checking certain boxes (let's say checkbox 4) should lead you directly to the corresponding section upon clicking 'Next Section', skipping any irrelevant pages.

Being new to AngularJS, I seek an efficient solution for this task. While JavaScript solutions are also welcome, AngularJS-specific methods would be greatly appreciated. Thank you.

javascript angularjs checkbox

Answer 1

Answer №1

This basic example is a simplified illustration that does not cover validation. It showcases a simple way to switch between different content ('pages') for users when they click on the 'Next Section' button.

<!doctype html>
<html ng-app='myApp'>
    <head>
        <title>Testing Validation</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 additional 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>

Answer 2

This basic example is a simplified illustration that does not cover validation. It showcases a simple way to switch between different content ('pages') for users when they click on the 'Next Section' button.

<!doctype html>
<html ng-app='myApp'>
    <head>
        <title>Testing Validation</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 additional 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 enables the creation of a checkbox that toggles the visibility of content

Answer №1

Similar questions

Unable to upload a file to an email using the mandrillapp JSON API

Strategies for detecting when a child checkbox is clicked within a parent li element

Change the class of multiple elements using jQuery with a set time interval

Encountering unhandled promise rejection error with email field in NextJS when using React Hook Form

What is the best way to conceal the dt tag when the dd tag contains no value

Is it possible to link actions to a storage location external to a component?

ReactJS does not update the conditional CSS class when hovering with mouseOnEnter or mouseOnOver

Align two DIVs in the correct layout: One as a sidebar that remains fixed, and the other as an expanding element

Injecting AngularJS together with TypeScript and Restangular to optimize application performance

Anticipating the resolution of promises and observables in Angular 2

Storing a credit card number securely using Stripe in a MERN stack application

To retrieve data from an AJAX response, you will receive an array in the form of a string

jQuery - Password Validation

Preserve the scroll location while adding new content to a list in AngularJS

Restrict User File Uploads in PHP

Information on the Manufacturer of Devices Using React Native

Interactive Vue.js canvases that adapt and respond to various

Guide for extracting the first matching group with regex in node.js

Angular directives have unique scope behavior when working with the replace value

Troubleshooting guide for resolving issues with the Angular Material datepicker's md-date-locale