How can I arrange the ng-class based on the clicked item's order?

http://plnkr.co/edit/pUtuZy?p=preview

In this scenario, there are three different border classes available:

.border1 {
  border: 1px solid #66FFFF;
}

.border2 {
  border: 1px solid #33CCFF;
}

.border3 {
  border: 1px solid #0099FF;
}

The goal is to assign the border1 class to the first button clicked, border2 to the second button clicked, and border3 to the third. Additionally, a restriction will be implemented to limit user selection to only three buttons.

Here is the current logic for the markup:

<div class="tag"
     ng-class="{'border1':selected1, 'border2':selected2, 'border3':selected3}"
     ng-mouseover="showTagDetails(t)"
     ng-click="clickTag(t)">{{t.name}}</div>

The challenge lies in implementing the correct logic to ensure that the second and third buttons receive the appropriate styles. Any suggestions on how to approach this problem?

$scope.clickTag = function(t) {

}
javascriptcssangularjsangularjs-ng-clickangularjs-ng-class

Answer №1

One way to keep track of selected indexes is by using the $index variable.

HTML Markup:

<div class="tag-container">
    <div class="tag" ng-class="selected.indexOf($index)!== -1 ? 'border'+ (selected.indexOf($index) + 1): ''" 
     ng-mouseover="showTagDetails(t)" ng-click="clickTag($index)">
        {{t.name}}
    </div>
    <tag-details tag="t"></tag-details>
</div>

JavaScript Code:

$scope.clickTag = function(index) {
  // Check if the length is less than 4 and index is not already selected
  if ($scope.selected.length < 4 && $scope.selected.indexOf(index) === -1) {
    $scope.selected.push(index);
  }
}

View Plunker Demo

Answer №2

Following the same approach you've been using, simply introduce a new variable:

var count = 0;

Next, within your function:

$scope.clickButton = function(btn) {
    count++;
    btn['clicked' + count] = true;
}

Finally, in your HTML code, make sure to include:

ng-class="{'active1': btn.clicked1, 'active2': btn.clicked2, 'active3': btn.clicked3}"

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

Achieving multiple validations on a single element in AngularJS, along with the ability to validate

Currently, I am in the process of constructing a form and utilizing the built-in AngularJS validation objects to validate the form. The following is an overview of my form: <form name="myForm" ng-submit="DoSomething()" novalidate> <te ...

javascriptangularjs

A unique CSS transition effect applied after toggling a class

Greetings everyone I recently created this code pen https://codepen.io/alexyap/full/MmYvLw/. I am facing a challenge with my navigation menu. The transition in works perfectly, but the fade-out effect looks terrible. I'm struggling to figure out this ...

jquerycsscss-transitions

Stop the execution of the setTimeout function when the webpage loads in JavaScript

In my postgres database, I have a table named students for storing student information. The structure of the table is as follows: id first_name last_name time_remind 1 pers1 pers1_name 2022-07-30 21:30 2 pers2 pers2_name 2022-07-30 20:38 Current ...

javascriptphphtmllaravel

Exploring the process of logging large objects in Node.js 11 using the console command

When working with Node.js 11, I've noticed that when I use console.log to output a large object, it sometimes throws a stack trace error or logs the full object including all of its inheritance. In my Jest tests, I encountered an error when trying to ...

javascriptnode.js

Avoiding line breaks when using an :after pseudo element

I am trying to style external links by adding a pseudo :after element right after the link itself, but I'm having trouble getting it to work on the same line. Here is the CSS code I have: a:not([href*="domain"])::after { content: url(data:image/svg+ ...

htmlcsspseudo-element

Angular JS is experiencing issues with two modules not functioning properly on a single page

Angular JS is a new technology for me. I have two modules, first2a and first22. Each module contains a controller named model1 and model2. Here is the HTML code: <!DOCTYPE html> <html > <head> <link rel="icon" ...

javascriptangularjs

What's the best way to ensure that your item list automatically updates the rendered list when an item is deleted

I've developed a web cart using Redux. The cart functions as expected, except for one issue - when I delete an item from the cart, the changes are only displayed after refreshing or navigating to another page. How can I update the view dynamically as ...

javascripthtmlreactjsredux

Troubleshooting webpack encore issues with importing enums from node_modules

I am faced with a challenge of utilizing an enum from a library I created in a different project. The library is developed using Vue and typescript, bundled with rollup. On the other hand, the project is built with Symfony, with the front end also using Vu ...

javascripttypescriptvue.jsenumswebpack-encore

Struggling to make image uploading function with Flask and JQuery

Utilize the code snippet below to submit forms and retrieve a modified version of text from Flask using AJAX and JQuery: from flask import Flask, render_template, request, jsonify app = Flask(__name__) @app.route('/') def index(): return re ...

javascriptpythonjqueryajaxflask

Can you provide the date time format used in the JSTL fmt tag?

To display date and time in JSTL, the fmt tag can be utilized. Details can be found here In order to format the date for use with front end tools like the datatable, a specific date format needs to be specified. By using parameters such as type or dateSty ...

javascriptjavadatatablesjstl

Artistic Canvas: Selected Image

I am trying to determine if the user has clicked on an image drawn in a canvas element. Despite clicking on the image, nothing seems to be happening. The alert function is not being triggered and the last condition in the code never evaluates to true. An ...

javascriptcsscanvasposition

Querying through a database containing 1 million <string Name, int score> pairs efficiently within sub-linear time

My JSON object holds 1 million pairs. var student = {[ { name: "govi", score: "65" }, { name: "dharti", score: "80" }, { name: "Akash", score: "75" },............. up to a million ...

javascriptc#jquery.netjson

Angular routes cause a glitch in the Bootstrap navbar, causing it to shift to the left on certain active

Apologies for the simple question, I am new to web design and couldn't find a solution even after extensive googling and searching. The issue I am facing is that when clicking on "EX5" or "EX6" in my navbar, it shifts to the left side of the screen i ...

javascripthtmlcssangularjsbootstrap-4

Having trouble with Next.js getStaticProps? Getting a TypeError that says "Cannot read properties of undefined (reading 'map')"?

My latest project was built using create-next-app as a base. In the Blog.js page, I attempted to fetch data from https://jsonplaceholder.typicode.com/posts by utilizing the getStaticProps() function. I followed the instructions provided in this guide: htt ...

javascriptreactjsnext.js

Is there a way to control the text animation loop on iTyped, both starting and stopping it?

Currently utilizing React, MUI, along with iTyped The animation implemented involves backspacing text and typing the next word in a specified array until reaching the final word. I am looking to enable a click function on the div containing this animation ...

javascripthtmlcssreactjsanimation

In Reactjs, a child component is unable to activate a function that is owned by the parent

I'm working with a modal parent component and a form child component. The challenge I'm facing is that the function to open and close the modal is in the parent component, while the submit function is in the child component. What I need is for th ...

javascriptreactjsformsparentchildren

alteration of colors in a Chartist chart

Currently, I am working with a chartist graph where the colors are defined at a framework level. However, I need to make changes to the colors for a specific graph without altering the framework level settings. I attempted to create a .less file, but unfor ...

htmlcssangularjschartist.js

Executing a callback function when a window confirmation is triggered during the onbeforeunload event

Currently, I need to implement a feature where a confirmation window pops up when the user tries to close the page. The code snippet for this functionality is included below: window.onbeforeunload=function(){ if(...) { return "Are you sure you want to ...

javascriptjquerycallbackonbeforeunloadconfirmation

Styling the footer of a webpage using CSS to adapt to different browser

I am currently working on a webpage that includes a footer. The footer is positioned correctly, but I encounter an issue when resizing the browser from bottom to top. For further details, please refer to the image below: Below is the CSS code for my foote ...

csshtmlfooter

What is the best way to remove table cells from a TableBody?

Currently, I am in the process of designing a table to display data retrieved from my backend server. To accomplish this, I have opted to utilize the Table component provided by Material UI. The data I retrieve may either be empty or contain an object. My ...

javascriptcssreactjshtml-tablematerial-ui