Remove an item with AngularJS

I have a JSON file that contains data which I am able to display using AngularJS. The information is presented in rows with checkboxes and a Delete button. My goal is to remove the data from both the display and the JSON file. To delete, simply click on the checkbox next to the item you wish to delete, then click the Delete button. Here is my Plnkr link for reference:

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

api.json is the name of the JSON file.

This is how the JSON file is structured:

{
  "1": {
    "venture": "XYZ Informatics",
    "member": [
      {
        "name": "abcd",
        "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="076665646347606a666e6b2964686a">[email protected]</a>"
      }
    ],
    "message": "This is a good day",
    "isclicked": false
  },
  "2": {
    "venture": "BBC Informatics",
    "member": [
      {
        "name": "xyz",
        "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="176f6e6d57707a767e7e79807278">[email protected]</a>"
      }
    ],
    "message": "This is a bad day",
    "isclicked": true
  }
}

Answer №1

Insert the ng-model attribute into the checkbox field....then loop through the data and utilize the delete function if it is checked

  $scope.delete = function() {
     angular.forEach($scope.datas, function(val, key) {
       if (val.isclicked) {
         delete $scope.datas[key];
       }
     })
   }

View

<form ng-repeat="data in datas">            
    <input type="checkbox" ng-model="data.isclicked">{{ data.venture }}          
</form>
<button ng-click="delete()">Delete</button>

DEMO

Answer №2

If your data is already stored in the scope, you can simply utilize the JavaScript delete function to eliminate a specific item from an array.

For example...

delete $scope.data["2"]

Angular's digest feature will then automatically update any components or functions that are watching that particular scope property.

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

`The date result is displaying inaccurately`

My JSON result appears incorrect vr_date :Date alert(this.vr_date ) // The result displays Thu Feb 07 2019 00:00:00 GMT+0400 var json = JSON.stringify(this.vr_date); alert(json); // The result displays 2019-02-06T20:00:00.000Z, indicating an issue with ...

Implement AJAX in order to circumvent fees from Google Maps and display maps exclusively upon user interaction by clicking a designated button

Starting July 16, 2018, the Google Maps API is no longer completely free. After July 16, 2018, in order to continue utilizing the Google Maps Platform APIs, you must activate billing for each of your projects. (https://developers.google.com/maps/documentat ...

Is it possible to retry NTLM Authentication failure in Sails.JS?

Currently, my NodeJS application is built on Sails.JS and uses ntlm-express for NTLM authentication. Everything works smoothly when the authentication is successful. However, when it fails (such as when a Firefox user enters incorrect credentials), ntlm-ex ...

React Leaflet causing a frequent map refresh due to context value updates

When I use map.on('moveend') to update the list of markers displayed in another component, I encounter a refreshing issue. The context in my project contains two arrays - one filtered array and one array with the markers. When I try to update the ...

How can I refresh the positions of all items in a list using Vue-Draggable and Acts As List?

Working on my project, I have integrated a Rails API backend with the acts_as_list gem and a Vue frontend utilizing the Vue Draggable package. The drag and drop functionality is functioning as expected, with a PUT request being sent to the server. However ...

Experiencing difficulties with extracting information from mySQL for my web development assignment

I am currently working on a personal project to enhance my skills in web and full-stack development by recreating the NYT Connections game. As part of this project, I have developed a database.js file using node.js which successfully connects to a local da ...

Sequencing code execution correctly in Node.js

I am currently working on a website that consolidates articles based on user interests. Although I have a backend set up, I am struggling to execute the code in the correct sequence. Essentially, my database consists of MongoDB containing user informatio ...

Laravel-Mix and BrowserSync are all set up and running smoothly, but there seems to be a glitch

tag, I have some important details regarding my current setup: [email protected] Node v12.16.2 NPM v6.14.4 Operating System: Laravel Homestead Description: While running npm run watch, everything seems to work smoothly. Updates on views, cont ...

The ngMessages validation feature in AngularJS fails to remove error messages from the CSS styling

Can anyone help me figure out why I keep getting a red color underline error even though there is no actual error and validation is successful? https://i.sstatic.net/AESLl.png I created my own directive to validate passwords and I am using Angular materi ...

Is it possible to observe the website functionalities and execute them directly from the console?

Question about JavaScript: Is it safe for a script tag to be visible in the body of the developer console and for functions to be run directly on the website? It raises security concerns, and there should be measures in place to prevent this kind of displa ...

Utilizing a service to pass objects between AngularJS controllers

Although this question has been raised before, I am still facing difficulties in following the instructions provided. I have a scenario where I need to share a basic object between two controllers using a service. Here is the code snippet: var app = angu ...

Leveraging react-markdown alongside Material-UI's table component

Currently, I am attempting to parse a markdown table using the react-markdown library and then displaying the resulting tags with the help of the Material-UI table component. Below is the code snippet for my renderer: import withStyles from '@material ...

Utilize the async/await feature when working with mongoose queries in a Node.js application

I was attempting to create an async and await function in mongoose, but encountered a situation where it did not work as expected and in another case I received a syntax error. Below is the code snippet: exports.updateDiscount= async (_id,discount) => ...

Issue with the Core php code - In relation to the onclick and onload events

The code below is currently functioning correctly: <a href ="#" onclick="accept ("<?php echo $getservice [$i]['id']; ?>, document.frml)"> Accept </a> In the above code, a Javascript function is being ca ...

Assigning the value of one variable to be equal to the most recent state value of another variable

As a beginner in reactjs, I am facing a challenge in my code where I need to set the starting balance in a form as the closing balance of the previous record. The initial values in the form are fetched from an API call stored in the get_schedule array. The ...

Exploring Autocomplete Functionality with SQLite Integration in Flask

I have been searching for a solution to my problem without any success. My SQLite database contains electronic products, and I have a search box that allows users to search for products by typing in their name. However, I want to enhance the user experienc ...

Issue arises when using Ionic 7 tabs with standalone Angular components

Hey, I'm new to Ionic and trying to learn it. However, all the courses available are on the old versions 5 or 6. I attempted to learn it with Angular standalone but it didn't turn out as I expected. The new way of routing wasn't working for ...

Tips for adjusting layout when screen orientation changes (Apache Cordova)

Is there a way to alter the layout of an HTML file when the orientation changes? I've created an app that looks perfect in portrait mode, but when I switch to landscape, it gets messed up because buttons and other elements are shifting down. I don&apo ...

Creating nested routes in react-router is a useful technique for managing complex applications. By

I have a parent container with nested routes: function Home() { render ( <Router> <Switch> <Route exact path="/website" component={Website} /> <Route path="/dashboard" compo ...

Data obtained from the server includes JSON objects along with quotes and regular expressions

While analyzing the functionality of a search page server through element inspection, it was observed that requests are sent via POST with JSON parameters. To verify this observation, I recreated the same POST request using Insomnia with identical paramete ...