Deleting a row from a table in Angular when a form is submitted

I am new to using Angular and I have been attempting to remove certain elements from a table upon submission.

<tr ng-repeat="val in values ">
    <td ng-bind="$index"></td>
    <td ng-bind="val.rec">ED1500322</td>
    <td>working</td>
    <td ng-bind="val.result">I am going to School</td>
    <td>
      <div class="radio">
        <input ng-model="val.iscorrect" value="yes" type="radio" ng-change="log(val)">
        <label for="opt1">yes</label>
        <input ng-model="val.iscorrect" value="no" type="radio" ng-change="log(val)">
        <label for="opt10">no</label>
      </div>
    </td> 
  </tr>

All the data is fetched using ng-repeat and I am unsure how to remove dynamically obtained data.

My objective is to remove a row when a toggle button is clicked to indicate that changes have been made.

You can view the Plunker here.

Any assistance on removing data dynamically would be greatly appreciated. Thank you in advance!

javascriptangularjs

Answer №1

Trigger a function on button click by following this pattern:

<button ng-click=updateValue();hideRow=true>Update Value</button>

Then, apply the ng-hide directive to the table row where val.iscorrect is not equal to 'yes'


  <tr ng-repeat="val in values" ng-hide="hideRow && val.iscorrect!='yes'">
    <td ng-bind="$index"></td>
    <td ng-bind="val.rec">ED1500322</td>
    <td>working</td>
    <td ng-bind="val.result">I am going to School</td>
    <td>
      <div class="radio">
        <input ng-model="val.iscorrect" value="yes" type="radio" ng-change="log(val)">
        <label for="opt1">yes</label>
        <input ng-model="val.iscorrect" value="no" type="radio" ng-change="log(val)">
        <label for="opt10">no</label>
      </div>
    </td> 
  </tr>

Answer №2

To begin, we need to store the indexes of all the items that are marked for removal in the $scope.valueToRemove array.

When the user submits their request, we must then delete all the specified items by retrieving their indexes from the $scope.valueToRemove array and using the splice() function to remove them accordingly.

Below is a clear demonstration of this process:

http://example.com/code-demo

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

Enhanced hierarchical organization of trees

I came across this code snippet: class Category { constructor( readonly _title: string, ) { } get title() { return this._title } } const categories = { get pets() { const pets = new Category('Pets') return { ge ...

javascripttypescript

Is there a way to modify the color of my question post-submission?

Within my code, there are numerous queries that need to be addressed. Upon submission, I desire to alter the color of each question to green if the response is correct, or red if it is incorrect. document.getElementById("submit-button").addEventLi ...

javascripthtmlcsscolors

Is it possible for JavaScript to interface with MySQL databases?

Is it possible to establish a connection between JavaScript and MySQL? If yes, what is the process? ...

javascriptmysqlajaxjson

Socket.io operates individually with each user

Showing a basic web-chat using socket.io. Node.js code: io.on('connection', function(socket) { // Sends 'hello world' message to all users socket.emit('send:message', { text: 'hello world' }); ...

javascriptnode.jsexpresswebsocketsocket.io

Is there a way to minimize the use of .value in Vue 3?

After recently diving into Vue 3, I find myself struggling to grasp some key concepts of the composition API. My current challenge involves converting a library from Vue 2 to Vue 3, where a reactive property named layout is being passed down to child compo ...

javascriptvue.js

Send the typeahead object result from Angular to another function within the controller

In my current setup, I am utilizing the ui-bootstrap typeahead feature to fetch an object from an external API. Upon selecting the object, it triggers a callback function that stores the results in a separate function within my controller. The challenge l ...

javascriptangularjsangular-ui-typeahead

Swapping out the main view for the partial view

Recently, I wrote some jQuery code to fetch data from an action by passing in a dashID. The expected result was to receive HTML containing the relevant information. Unfortunately, my jQuery script is not returning the desired data. Below is the JavaScript ...

javascriptc#jqueryajaxasp.net-mvc-5

Problems encountered with Bootstrap tooltip functionality in combination with AngularJS

Just starting out with angularjs and struggling to implement form validation using bootstrap tooltip. I've got the validation part working where the input field turns red when it's invalid, but the tooltip text is not displaying. Here's the ...

angularjstooltipangular-ui-bootstrap

Template not rendering array data correctly in Meteor

Here is an example of the array structure: var myarray = [ device1: [ name:device1 , variables: [ variable1: [ name: variable1, unit: "a unit", ...

javascriptarraysnode.jstemplatesmeteor

Exploring the money library in typescript after successfully installing it on my local machine

I've been struggling to set up a new library in my TypeScript project for the first time, and I can't seem to get it functioning properly. The library in question is money. I have downloaded it and placed it in the root of my project as instructe ...

javascripttypescript

The function image.getState is not recognized (when trying to implement ol in an Angular project)

I attempted to integrate the code provided in an angular(4) application at the following link: However, I encountered an error every time I tried to launch the browser. To start with, here are my imports (both libraries were locally installed via npm): ...

javascriptangularjsopenstreetmapopenlayers-3angular-openlayers

Is there a way to deactivate the onClick event when the dropdown placeholder is chosen?

I have experimented with different methods to prevent the onClick event when selecting either placeholder, but I have not been successful. Here is my current code: <div class="choosesign"> <div class="zodiacs"> < ...

javascriptonclickdropdown

Allow users to interact with table rows by making them clickable and sending a post parameter to a jQuery

After creating a table and populating it with elements using JSTL tags and EL expressions, the next step is to make each row clickable. This can be achieved by implementing the following function: $("tr").click(function() { window.location.href = $(th ...

javajavascriptjqueryjstlel

Exploring the Past: How the History API, Ajax Pages, and

I have a layout for my website that looks like this IMAGE I am experimenting with creating page transitions using ajax and the history API. CODE: history.pushState(null, null, "/members/" + dataLink + ".php" ); // update URL console. ...

javascriptjqueryajaxjsonhistory

What could be causing my JavaScript source to fail to load in an HTML document?

Currently, I am in the process of creating a basic offline dinosaur game using HTML, JS, and CSS that is well-known to everyone. I have been diligently working on it and have successfully made everything function for a few hours. However, out of nowhere, m ...

javascripthtmlsrc

Error encountered when running NPM start - file path unable to locate JSON package file

Hello everyone, I'm new here and appreciate any help in advance! I'm currently working on my first project and encountering some challenges. The biggest one is that whenever I try to run npm start, I keep getting an error message: I've att ...

javascriptjsonnpm

Submit button in React form not activating the onSubmit method

Having an issue with a login form code where the submit handler is not being triggered when pressing the Submit button. Any idea what could be causing this? The loginHandler function does not seem to trigger, but the handleInputChange function works fine. ...

javascriptreactjsformsnext.js

Is the object returned by the useParams hook maintained across renders?

The book that is displayed is based on the URL parameter obtained from the useParams hook. The selected book remains constant across renders unless there is a change in the value returned by the useParams hook. I am curious to find out if the object retur ...

javascriptreactjsreact-hooksreact-router-dom

There seems to be an issue with the .html() function in one of my

I'm currently in the process of transitioning my code to Angular and I could use some assistance with creating a directive. Here's what I'm trying to convert: jQuery(document).ready(function ($) { "use strict"; $('#cool-naviga ...

javascriptangularjs

Avoid causing the newline character to display

var i = 'Hello \n World' console.log(i) /* Output: Hello World */ /* Desired output: Hello \n world */ var j = 'javscr\u0012ipt' console.log(j) /* Output: javscr ipt */ /* Desired output: javscr\u0012ipt */ ...

javascriptangularjsspecial-characters