Using switch statement upon page loading in AngularJS

I am currently working on refactoring a switch statement that identifies specific classes upon page load into one of my controllers.

Does anyone have suggestions on how I can transform this straightforward task using Angular?

$('.radior').each(function() {
  var ones = $(this).find('.newone'); // newone's of current .radior
  var count = ones.length;

  switch (count) {
      case 1:
      case 2:
      case 3:
        var sub = ['full', 'half', 'third'];
    ones.addClass( sub[count - 1] + " col-xs-12 col-md-" + (12 / count));
        break;
      
      case 4:
        ones.addClass( "quarter col-xs-12" );
        break;

      case 5:
        ones.addClass( "another col-xs-12" );
        break;
  }
});

Any assistance on this matter would be highly valued. Thank you.

javascriptangularjsswitch-statement

Answer №1

To achieve the desired outcome, it is recommended to convert this into a directive:

angular.directive('radior', function() {
    return {
        restrict: 'E',
        transclude: true,
        link: function(scope, element, attr) {
            var ones = element.find('.newone'); // newone's of current .radior
            var count = ones.length;

            switch (count) {
                case 1:
                case 2:
                case 3:
                    var sub = ['full', 'half', 'third'];
                    ones.addClass(sub[count - 1] + " col-xs-12 col-md-" + (12 / count));
                    break;

                case 4:
                    ones.addClass("quarter col-xs-12");
                    break;

                case 4:
                    ones.addClass("another col-xs-12");
                    break;
            }
        }
    };
});

Your HTML structure should look like this after implementing the above changes:

<radior>
   <div class="newone">test</div>
</radior>

This code snippet has not been tested yet, but it is expected to work as intended with possible minor adjustments based on your specific requirements.

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

Monitor the collection for changes before adding an item to the collection

When using ui-select multiple, I am facing an issue where I need to check the collection before ng-model="collection" is updated in order to ensure that the new value is not already present in it. Simply watching the collection does not solve this problem ...

javascriptangularjsui-select

Incorporating <span> elements into a comma-separated list using Jquery on every other item

When I receive a comma-separated list of items from a database and insert them into a table cell, I want to apply alternating styles to make it easier for users to distinguish between them. For example: foo, bar, mon, key, base, ball I'm looking to ...

javascriptjquerycss

"Error: Command 'npm' is not recognized as a valid internal or external command" encountered while using create-react-app

Why won't npm work for me? I've been trying to dive into the world of React and kickstart my learning journey. With Node installed, along with the create-react-app package, I thought I was all set. When I run commands like npm -v or create-reac ...

javascriptnode.jsreactjsnpm

Tips for broadcasting a router event

Currently, I am working with 2 modules - one being the sidenav module where I can select menus and the other is the content module which contains a router-outlet. I am looking for the best way to display components in the content module based on menu selec ...

javascriptangularroutereventemitterrouter-outlet

Ways to retrieve several parameters from a controller using Ajax Jquery in Codeigniter

I need to retrieve a list of images from a folder based on a specific ID. Currently, I am able to get the file names but I also require the upload path. Is there a way to obtain both sets of data using a single function? Javascript Code: listFilesOnServ ...

javascriptjqueryajaxcodeigniter

Viewing a PDF file within an Ionic application

Recently, I've been working on developing an app using the Ionic framework and I am faced with the challenge of displaying a PDF within the app. After researching extensively online, I came across a directive that seems to solve my problem: https:// ...

angularjspdfmobileangularjs-directiveionic-framework

The canvas appears blank when using Firefox version 36

The application is made up of an interface (html) and workspace (canvas). We utilize three.js to create elements on the canvas. So far, it's been functioning perfectly on Chrome, Opera, and Firefox 35. You can see it in action here: However, in Firef ...

javascriptfirefoxcanvasthree.js

Is it possible to determine if a window was opened using window.showModalDialog()?

Is there a way to determine if a window was triggered by window.showModalDialog()? I've noticed that when a new window is opened using window.open(), window.opener correctly returns the parent window. However, when using window.showModalDialog(), wind ...

javascriptjquerywindow.openershowmodaldialog

Looking for an easy solution in RegExp - how to locate the keys?

Similar Inquiries: Retrieving query string values using JavaScript Utilizing URL parameters in Javascript I am tasked with extracting specific keys from a series of URLs where the key is denoted by 'KEY=123'. My goal is to identify and e ...

javascriptregex

How can I easily move from a shared page to a specific page in Angular 8?

Just stepping into the world of front-end development, I have a scenario where my menu page offers 3 options to navigate: Go to Arena. Go to Dungeon. Go to Battleground. However, clicking on any of these options leads me to a common page for character p ...

javascriptangularangular-ui-routerfrontend

Changing font color of a selected item in Material-UI's textview

I have a select textview in my react app and I am wondering how to change the font color after selecting an item from this textview. <div> <TextField id="standard-select-currency" select fullWidth l ...

javascriptcssreactjsmaterial-ui

Prevent the need to go through the keycloak callback process each time the page is

I have integrated keycloak as an identity provider into my React application. I successfully added the keycloak react dependency via npm. Below are the versions of the keycloak react npm modules on which my application depends : "@react-keycloak/web ...

javascriptreactjsconfigurationkeycloak

Exploring AngularJS: Retrieving multiple values for a single variable

I'm currently working on a project using the MEAN Stack and in the process of familiarizing myself with AngularJS. In my form, I have a series of checkboxes where users can select students which are then stored in an array. For each selected student, ...

angularjs

awaitMessages feature does not capture slash commands

In my development process, I have a file named botReady.js that is designed to run as soon as the bot becomes ready. In this file, there is a specific section dedicated to handling a bump bot in a designated channel obtained using the client.channels.fetch ...

javascriptnode.jsdiscorddiscord.jsbots

Design a custom scrolling navigation bar for enhanced user experience

Struggling with web design as I develop a site in ASP.NET. I have a database full of courses, each with numerous modules. The challenge is creating a navigation bar that dynamically adjusts to accommodate the varying number of modules per course without o ...

jqueryhtmlcssangularjs

To display the user's input value in the console log upon clicking

Having trouble displaying the user's input value in the console when the button is clicked. function submit(){ var userInput = document.getElementById('input_text').value; console.log(userInput); } ...

javascriptjquery

The JSON file gets emptied every time I refresh the page repeatedly

I am encountering an issue where my JSON file gets cleared if I restart the page quickly after using the fs module to read/write it. The JSON data is read at the beginning of the page like this: let preferencesJSON; try { preferencesJSON = fs.readFile ...

javascriptnode.jsjson

Converting a JSON object with numerical keys back to its original form

Recently diving into JavaScript programming, I find myself struggling with reversing the keys of a single JSON object. Here is the specific object that I'm attempting to reverse: {70: "a", 276: "b ", 277: "c ", 688: "d", 841: "e", 842: "f", 843: ...

javascriptjqueryjsonobjectreverse

Customizing JqGrid to include a button in the advanced search dialog

I am interested in enhancing the advanced search dialog to include a feature that allows users to save a complex query they have built. Although saving the SQL code is not an issue, I need guidance on integrating buttons within the advanced search query d ...

javascriptjqueryjqgrid

Is it possible to dynamically add an id or class to an element using document.createElement in JavaScript?

As a beginner in the world of JavaScript, I understand that the code structure I have used here may not be ideal for real-world applications. However, I am using it to practice my understanding of for loops and fetching JSON data. My main query is whether ...

javascripthtml