I am attempting to implement a feature that changes the color of buttons when they are clicked within an ng-repeat loop

A problem is occurring with the ng-class directive in this HTML code, which is generating seats using the ng-repeat directive. The colors are not being added properly when a seat is selected.

If you'd like to view my code, it can be found in this JSfiddle link and below:

<body class="text-center" ng-app="movieApp" ng-controller="movieController">

<div id="content"> <span>
        Name: <input type="text" ng-model="name" required>
        Number of Seats: <input type="text" ng-model="seat" required>
    </span>

</div>
<div id="button">
    <button ng-click="Select()">Start Selecting</button>
</div>
<div ng-if="selected">
    <div>Row A 
<span ng-repeat="value in values" ng-class="{ 'selected-class-name': $event == selectedIndex }" ng-click="SeatSelected($event)">
            <input type="button" id={{"A"+value}} >
        </span>

    </div>
    <div>Row B 
<span ng-repeat="value in values" ng-class="{'selected':$event = selectedRow}" ng-click="SeatSelected($event)">
            <input type="button" id={{"B"+value}} >
        </span>

    </div>
    <div>Row C 
<span ng-repeat="value in values" ng-class="{'selected':$event = selectedRow}" ng-click="SeatSelected($event)">
            <input type="button" id={{"C"+value}} >
        </span>

    </div>
    <div>Row D 
<span ng-repeat="value in values" ng-class="{'selected':$event = selectedRow}" ng-click="SeatSelected($even...
   

Answer №1

Take a look at this example:

http://jsfiddle.net/hv9ssxuf/

I included the code

angular.element(event.toElement).toggleClass('selected');
to handle seat clicks, and it's functioning perfectly in my case.

Give it a try and see if it works for you too!

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

CSS and JavaScript dropdown malfunctioning due to a position swap in internal CSS

This example demonstrates functionality .c1 { background-color:red; position:relative; } .c2 { background-color:blue; position:absolute; height:50px; width:100px; display:none;} .show { display:block; } <body> <button ...

Prevent jQuery from overriding CSS styling

Having an issue with adding a <p> tag before each jQuery accordion on my MVC page. No matter what I try, the jQuery styling keeps interfering with the classes and styles of my <p> tag. Is there a way to make it look like the other non-jQuery & ...

How to extract URL parameters in an Express.js and AngularJS web app

Encountering a routing issue in my ExpressJS and AngularJS project. This project is not a single-page application, and we are not utilizing any view engines like jade - only plain HTML. I am currently working on implementing password reset functionality ...

The left border consistently occupies any leftover space within the container

I have encountered an issue with my code where the border does not fill the empty space in the div container when there is only one item li present, but works fine if there are multiple items. The problem can be seen in the image below: https://i.sstatic. ...

Is there a way to use CSS animation and transform to create a flip effect on two different divs, flipping them up and then back down with pauses and looping in between?

I have a query about CSS animation and transform. I am looking to create a flipping effect on two divs - one flips up from the bottom, then back down, followed by the second div flipping up and back down. I want this sequence to repeat indefinitely with pa ...

Issues are arising with Bootstrap's functionality within the Vite React app

I am new to working with react and vite. I am currently developing a vite react application that requires the use of bootstrap. I followed the instructions provided on the official Bootstrap website here. However, not all Bootstrap functionalities are work ...

The 'ui.bootstrap' module is currently unavailable and not functioning properly

Issue: Module 'ui.bootstrap' is not available, causing other modules to stop working. Question: Is there a solution for this? I am currently using angular 1.4.7. var App = angular.module('my-clinic', [ 'ngRoute', 'ngA ...

Ways to create an overlapping effect for 3 elements using CSS

There are 3 elements in my setup: <div class="foo"></div> <div class="bar"></div> <div class="foobar"></div> I am looking to have .foo overlap .bar, .bar to overlap .foobar, and .foobar to overlap .foo. This is the de ...

Oops! Looks like there was a mistake: [ng:areq] Argument Controller is Not a Function

I'm currently working on integrating a blank Google Maps app into my Rails project with the intention of adding markers later through factories. This approach was successful in my previous project, however, I am facing difficulties getting it to load ...

What is the best way to utilize a color picker to apply CSS color to a parent element?

When the pencil glyphicon is clicked, a color picker appears. I only want to apply the selected color from the color picker to the list elements that are the grand parent of the pencil glyphicon. Here's a snippet of my Ruby front-end code: <% cat ...

The issue with rendering CSS styles from <style></style> tags in Visual Studio while debugging in VB is causing a problem

<style> #ctrtable{width:600px;margin-left:auto;margin-right:auto;} </style> For the purpose of centering a table on the viewport, the above style block is added to the web page.   While using Visual Studio 2013 Express in debug mode, t ...

Error retrieving data from the ngresource properties resource

In the code snippet below, I have a simple factory that requests a json object containing location information. The requests are successful and the data is present in the object. However, there seems to be a scope problem as I am unable to access the prope ...

Flask's JSON data format

When it comes to fetching data from a URL generated with Flask and not by me using AngularJS and Restangular, I seem to be encountering some issues. The JSON data I have is as follows: {"patients": ["{\"_id\": {\"$oid\": \"5677d63 ...

Utilizing pop-up info boxes

After thoroughly reviewing the documentation on Imagemapster's website and browsing several posts, I am still struggling to get the tooltips working correctly. I attempted to share my HTML and JS code on jsfiddle.com without success, so I have provide ...

Angular JS - Establishing a Connection to Woocommerce OAuth v1

I'm having trouble authenticating myself with the rest service. I attempted to use this library to generate all the necessary parameters as mentioned here, and I constructed the request like this: $scope.oauth = new OAuth({ consumer: { p ...

Adjusting the width of input textboxes for alignment

I currently have a set of input textboxes that I have attempted to align using CSS with the {width: xxx px;} property. However, this method is unreliable as it does not consistently ensure proper alignment. <style> #left_col p { margin-top: 15px ...

Finding and choosing a date from an ng-model datepicker using Selenium Webdriver - a guide

I am encountering an issue where I can open the date picker pop-up calendar with a click, but I cannot select a specific date from it. This is due to the input field being read-only, which means that any input provided through sendkeys or JavascriptExecuto ...

Issue encountered in AngularJS: struggling to store the localStorage item in the scope variable

I've been trying to save the values from window.localStorage.getItem('job_id.done_tasks') into a $scope variable, but I'm encountering difficulties. Can you please review my code? $scope.done_tasks = {}; $scope.done_tasks = window.loca ...

Begin ng-repeat from a specific object within an array of objects in AngularJS

In my AngularJS controller, I have an array of objects where I need to iterate starting from a specific object with a certain key:value pair. The iteration should be limited to 4 items. Below is the code for the controller: app.controller("products", ["$ ...

Implementing JSON data in a dropdown menu using AngularJS

When trying to read JSON data, I am encountering an issue where the dropdown list is displaying a value of 0 instead of the expected value. How can I properly read the JSON data for these dropdowns in Angular? ...