Sending a value to a different Ionic page based on a specific condition

Here is the code snippet from my app.js:

var app = angular.module('dbpjkApps', ['ionic'])

app.controller('kategoriCtrl', function($scope) {
    $scope.listKat = [
        {kat: 'math'}, {kat: 'physics'}, {kat: 'English'}, {kat: 'bahasa'},
    ]})
    .config(function($stateProvider, $urlRouterProvider) {
        $stateProvider

        .state('menu1', {
            url: '/menu1',
            templateUrl: 'xxx.html' //this is condition what i mean. 
        })

        .state('login1', {
            url: '/login1',
            templateUrl: 'login1.html'
         });

         $urlRouterProvider.otherwise('/login1');
    })
})

During the initial step, users have to select a category from a dropdown on login1.html.

How can I implement logic to determine if the user selects math or physics, and then direct them to either menu1.html or menu2.html? Additionally, how can I retrieve the selected value from login1.html in menu1.html or menu2.html?

Appreciate any help and guidance. Thank you!

Answer №1

To retrieve the selected value from a combobox, utilize ng-model.

Additionally, ensure to define the state in stateProvider:

.state('menu1', {
            url: '/menu1',
            templateUrl: 'menu1.html' //this is the condition I am referring to. 
        })


.state('menu2', {
            url: '/menu2',
            templateUrl: 'menu2.html' //this is the condition I am referring to. 
        })

Subsequently, validate the ng-model value of the combobox in the Login Controller and include the following lines to redirect the page:

if(condition1){
       $state.go('menu1'); 
}else if(condition2){
       $state.go('menu2'); 
}

Answer №2

Begin by setting up your configuration

.config(function($stateProvider, $urlRouterProvider) {
        $stateProvider

        .state('menu1', {
            url: '/menu1/:userChoice',
            templateUrl: 'xxx.html' //this is a condition that needs to be met
        })

        .state('menu1', {
            url: '/menu2/:userChoice', //defining parameters for the state
            templateUrl: 'xxx2.html' //another state 
        })

        .state('login1', {
            url: '/login1',
            templateUrl: 'login1.html'
         });

         $urlRouterProvider.otherwise('/login1');
    })

In the controller, determine where to navigate to:

    app.controller('kategoriCtrl', function ($scope, $state) {
    $scope.listKat = [
        {
            kat: 'math'
        }, {
            kat: 'physics'
        }, {
            kat: 'English'
        }, {
            kat: 'bahasa'
        },
    ]

    //Define ng-model in the select tag in your HTML template.

    $scope.choice = $scope.listKat[0];

    $scope.changeState = function () {
        if ($scope.choice == "math") {
            $state.go("menu1", {
                userChoice: $scope.choice
            });
        } else if ($scope.choice == "physics") {
            $state.go("menu2", {
                userChoice: $scope.choice
            });
        }

    }
})

To access the params in your math1 controller:

app.controller('math1Ctrl', function($stateParams) {
    console.log($stateParams.userChoice); // will log either 'math' or 'physics'
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Library for Nodejs that specializes in generating and converting PDF/A files

Is there a library available that can convert/create a PDF/A file? I've been searching for solutions but the existing answers suggest using an external service or provide no response at all. I heard about libraries in other languages like ghostscriptP ...

What is the quickest way to redirect a URL in WordPress?

Is it possible to redirect a URL instantly in WordPress using this script code? JavaScript Code: jQuery(document).ready(function() { var x = window.location.href; if (x == 'http://example.com/') { window.location.hr ...

JQuery submit event not triggering object setting

I'm looking to gather input values from a form and store them in an object for an offer. After trying the following code on submit: $(document).ready(function(){ $('#formOffre').on('submit', function(e) { e.preventDefault ...

Nested Ajax request fails and triggers a full page reload

My goal is to search for product information and images using a product code input on index.php. The query runs in open_first.php via an ajax post request, which works perfectly. open_first.php displays images that can be selected by clicking on them. How ...

The jQuery .Text() method efficiently replaces the contents of an element with fresh

I am experiencing an issue where the .text() function in jQuery replaces both the text and HTML within an element. I'm looking for a solution that allows me to only modify the actual text and leave the HTML intact. Any ideas on how I can achieve this? ...

Verification - enter a unique key for each ajax call

As I develop a new app, I am aiming to separate the HTML/JS layer from the PHP layer in order to prepare for a potential phonegap version in the future. One major concern I have is regarding authentication. Since I won't be able to rely on session va ...

The Jquery ajax page is redirecting automatically when a post request is made

Encountering an issue while attempting to upload multiple files through AJAX, as the process redirects to a blank page displaying only the names of the uploaded files. Here is the HTML tag: Below is the JavaScript function: function upload(){ var proje ...

Angular.js model that is updated by checkboxes

In my project, I have created a model that is linked to several other models. For instance, let's consider a scenario similar to a Stack Overflow question associated with tags. Before making a POST or PUT request, the final Object may appear like this ...

The symbol "#" appears in my URL whenever the link is clicked

Seeking guidance on a URL issue that I am facing. Whenever I click the source link, it adds a pound sign to the URL. How can I prevent this from happening? Can someone assist me in identifying the necessary changes required in my jQuery or HTML code? Bel ...

Can you provide instructions on how to configure the npm settings to use the current directory in a pre

I'm currently working on setting the installation directory from where the user is installing to an npm config variable. This will help me reference it in my installation script. Can anyone advise if there is a command line solution for this or will ...

Activate a tooltip on the button depending on the value entered in the search field

I need to display a tooltip on the button when the search field is empty. Here is what I have attempted: // Enable hover feature const searchBtn = document.querySelector('.find__btn'); searchBtn.addEventListener('mouseover', () => ...

Adjust speed on various HTML5 video players

I'm looking to slow down all the HTML5 video players on my page to 0.5x speed. Currently, I have a JavaScript snippet that only affects one video player at a time. <script type="text/javascript"> /* play video twice as fast */ document.quer ...

Adding jQuery SVG Sources to SVG Elements

Can the jQuery SVG source code be included in a standalone SVG document? Here is an example: <script type="application/javascript"> <![CDATA[ // jQuery SVG code ]]> </script> I want the SVG document to be self-contained, ...

The Maui project is experiencing difficulties in the build process

Encountering errors while compiling my Maui project with platform-specific code. The errors I'm getting are as follows: Microsoft.Android.Sdk.RuntimeConfig.targets(61, 5): [MSB4062] The "RuntimeConfigParserTask" task could not be loaded from ...

Using AngularJS to dynamically populate a dropdown menu from a JSON object

I am a beginner to Angular and currently facing my first significant challenge. The JSON object below is the address data retrieved from a third-party API and added to $scope.AddressData in a controller: $scope.AddressData = [{ "Address1":"South Row", ...

Looking for assistance in setting up a personalized slideshow to automatically play on its

Recently, I have taken responsibility for a project that was initiated by someone else. The website contains a customized slideshow on its homepage. To meet the client's requirements, I have already made some alterations to the appearance and feel of ...

Shining a component (or persona) however essentially duplicate a distinct term

Is it possible to highlight an element or word, but still copy a different word when hitting ctrl+c? For example, imagine I have an emoji represented by: Original text: :heart: Output in HTML: <span background={...logic here}></span> I am ...

What is the best way to position my Jchartfx area graph below my gridview?

When my page loads, the graph appears like this. It consistently shows up in the top left corner even though it should be positioned underneath the grid view as intended. var chart1; function createGraph(mpy) { if (mpy == undefined) mpy = 12.00; ch ...

What is the best approach to include two ng-contents within a single template and manage them using *ngIf?

Presently, I am dealing with an Angular 2 component that is designed to showcase a Bootstrap 3 button group. This particular component has the capability of having a label or standing alone. In order to address this, I opted to utilize two ng-contents con ...

Clicking on Only One Card in Material UI React

I've encountered an issue with my code: const useStyles = makeStyles({ card: { maxWidth: 345, }, media: { height: 140, }, }); export default function AlbumCard(props) { const classes = useStyles(); let ...