Having two ng-click events and two distinct classes in an ng-repeat based on the selected option

There are two buttons in my code that should remove a div within an ng-repeat loop. Depending on which button is clicked, a custom CSS class should be added to the effect. The CSS changes based on the option selected.

When I click on a button, either 'reject' or 'accept' class should be added to the first card and then that card should be removed. Right now, I am able to remove the card using .pop(), but I'm struggling to add the CSS class. If I remove $scope.matches.pop(); the class gets added but the card remains, and if I keep that line, the class doesn't get added.

You can view the Plunker here: http://plnkr.co/edit/go54DQMsPdsRcssLeZZ5?p=preview

Here is the code snippet:

<td-card ng-class="{reject : rejectShow(match), accept : acceptShow(match)}" ng-repeat="match in matches track by $index" class="cards card-{{$index}}" > 
    <div class="content">content</div>
</td>

<button class="button" ng-click="reject(match)">
    button reject
</button>

<button class="button" ng-click="accept(match)">
    button accept
</button>

AngularJS Code:

var shownAccept = false
var shownReject = false
var className = 'initClass';

$scope.accept = function(match) {
    console.log('accept button')
    $scope.matches.pop();
    shownAccept = match;
}

$scope.reject = function(match) {
    console.log('reject button')
    $scope.matches.pop();
    shownReject = match;
}

$scope.rejectShow = function(match) {
    return angular.equals(shownReject, match);
}

$scope.acceptShow = function(match) {
    return angular.equals(shownAccept, match);
}

Note: Solutions without JQuery are preferred.

Answer №1

Implement a variable called $scope.selectedIndex

Update the value of $scope.selectedIndex to be equal to the current index whenever you click on the update button.

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

Ways to bring GIFs into NextJS

I am currently working on my portfolio website using Nextjs and I would like to incorporate gifs into the site. However, I have been struggling to figure out how to do so. Below is the code that I have been working with: https://i.stack.imgur.com/zjoiD.pn ...

In order to utilize Next.js with pkg, you must enable one of the specified parser plugins: 'flow' or 'typescript'

Utilizing next.js with the pkg in my project, following the steps outlined in this tutorial, I encountered an error when running the pkg command: > Error! This experimental syntax requires enabling one of the following parser plugin(s): 'flow, t ...

Transform the input value into a string

Struggling with converting an input value into a string. HTML: <input type="text" placeholder="Email Ex: john123" id="emailinput"> <input type="text" placeholder="Domain Ex: @gmail.com" id="domaininput"> JS: let emailVal = document.getElem ...

What is the best way to format and return a result object list in JavaScript or Angular?

I have a question regarding the use of for loops in JavaScript or utilizing Angular to output the resulting object list. Here is an example of an object list: var alist = []; alist = [ { 'code': 1000, 'type': 'C' ...

Make sure the inputs in separate table data cells are lined up in

I need help aligning two input fields in separate td elements to be on the same line. The issue I am encountering is that when an input is added to a td, it covers up any text within the td. https://i.stack.imgur.com/c7GiQ.png There are two scenarios: I ...

What is the proper way to execute a datastore query in a Node.js environment?

Attempting to fetch entities from my Google Cloud Datastore, filtered by a specific key name. I can't seem to figure out what I'm doing wrong in my code. First, I initialize my Datastore instance. const ds = new Datastore({ projectId: "my ...

Uploading files with node.js and express

Currently, I am following the steps outlined in this tutorial: I have successfully followed the instructions until the section where they set up the routes without actually creating any views. The tutorial states: That's it, we have completed sett ...

Angular Editable Pop-up

I have implemented Xeditable in my AngularJS application to allow users to modify table values on the fly without the need for buttons. I use the blur attribute to quickly submit changes inline. <a href="#" buttons="no" blur="submit">{{ myValue }}&l ...

Restricting character count when displaying output in JavaScript

Is there a way to restrict the number of characters displayed on a label using a JavaScript file? I am encountering an issue with a specific part of the code that is triggered by a button click and is responsible for printing the contents from a preview bo ...

Difficulty rendering wireframe with Three.js MeshBasicMaterial

I am experiencing an issue with my geometry created using the three.js API. When I export an obj file from Blender and import it, the object renders faces instead of wireframe as desired. Could this problem be due to a mistake in my import or export proces ...

Identified a hyperlink issue starting with www., substitute it with an HTML element

While I have successfully converted occurrences of http or https into a elements, I am encountering difficulties with the www. prefix. Can someone provide an explanation for this issue? $("[name='text']").each(function(element) { let str = $( ...

Using Rails to Pass Front-End JavaScript Data from an External API to the Controller

I need to retrieve coordinates from an external API, specifically the Google Maps API, and then send it to my controller. However, I am encountering a 500 internal server error when using jQuery/Ajax for this task. Researching the issue online suggests tha ...

Customizing the Image Insert Dialog in Pagedown Editor

I've developed a custom insertImageDialog hook to enable file uploads directly within the editor. $('div#insertImageDialog input[type=file]').ajaxfileupload({ action: $file.attr('data-action'), ...

Stop specific characters from being input into a text field

My goal is to restrict the characters allowed in a text box to the following: A to Z in both upper and lower case, Ñ and ñ, and space. I have a function that runs onkeyup: FieldOnKeyUp(el) { !(/^[A-zÑñ-\s]*$/i).test(el.value)?el.value = el.value ...

Connecting onClick event to a dynamically created div using Dojo

While working with dojo 1.9.2, I encountered an issue when trying to add an onClick function to a dynamically created piece of HTML code like so: clickableDiv = "<div data-dojo-attach-point=\"testBtn\">Click Me!</div>"; self.racks.in ...

Creating a Gatsby blog post on Enhancing Your Website with Rich Snippets for Embedded YouTube Videos

I have a website built with Gatsby and the Netlify CMS, and occasionally I want to include embedded YouTube videos in my blog posts. I am looking to implement a videoObject schema for these videos with the following structure: { "@context": "http:// ...

Effortlessly glide to the top of the webpage

After dedicating numerous hours to this task and being a newcomer to JavaScript/JQuery, I am still unsure of how to achieve the following: I have implemented a "back to top" anchor link in the footer of my pages that directs users back to the header. I am ...

Is there a way to modify CSS styles for a child tag element after hovering over its parent?

Here are my HTML code segments: <div class="div-builder"> <div> <a href="#"> <img src="/photos/20/Apple-Logo-icon.png" width="50" alt="Logo"> </a> <h3>Title</h3> < ...

Receive an error stating "Filename is not defined" when attempting to upload an image in React

Postman functioning properly with my backend code. I utilized form-data and added a random file. The file uploaded successfully to the image folder, but a problem arises when it comes to React. It fails to upload and displays an error on the backend stati ...

What could be causing the spinner (Bootstrap 5.x) to not show up on the screen

I'm having trouble getting a spinner to show up when a user clicks a form submit button. Below is the HTML code to add a <div> for the spinner: <div class="pageloader"> <img src="../images/loader-large.gif" alt ...