How to make delete button delete a user in AngularJS?

Question

I am new to AngularJS, and I need some help of trying to make the delete button, to delete a user in AngularJS. If anyone can help, I will be thankful. Thanks in advance.

Here is my delete button I have created

<button type="button" 
         class="delete" 
          ng-click="" 
          ng-show="!inactive">Delete</button> 
    //The user view 
   <div class="people-view">
  <h2 class="name">{{people.first}}</h2>
    <h2 class="name">{{people.last}}</h2>

  <span class="title">{{people.title}}</span>

  <span class="date">{{people.date}} </span>



</div> 



//Controller
 app.controller('MainController',['$scope', 'people', '$routeParams',
function($scope, people, $routeParams) {
people.success(function(data) {
 $scope.people = data[$routeParams.id];


   });
  }]);

Are you use ng-repeat to display user ? And what language in server side you use ? — Akashii
– Akashii, Commented May 1, 2017 at 14:12
I am not using any ng-repeat. I am grabbing the users from my json file. — Jośe
– Jośe, Commented May 1, 2017 at 14:14
Just copy and paste your controller code here that will be helpful for us to answer. — Surjeet Bhadauriya
– Surjeet Bhadauriya, Commented May 1, 2017 at 14:24

Surjeet Bhadauriya · Accepted Answer · 2017-05-01 15:53:10Z

2

So in ng-click call a function named deleteUser and pass the id you are getting for that user.

//HTML
<button type="button" 
         class="delete" 
          ng-click="deletePeople(id)" 
          ng-show="!inactive">Delete</button> 
//The user view 
<div class="people-view">
  <h2 class="name">{{people.first}}</h2>
  <h2 class="name">{{people.last}}</h2>
  <span class="title">{{people.title}}</span>
  <span class="date">{{people.date}} </span> 
</div>

So now inside you controller make a function to delete the user. If you are using it inside the ng-repeat then you should pass parameters accordingly. According to your code, you may pass it.

 //Controller
 $scope.deletePeople = function (id){
  //here comes your delete code.
  //pass id from the ng-click function.
  //based on that id find the record in the $scope.people array and remove that from the array.
  //you can use javascript splice function to remove it.

  var userToDelete;
  $scope.people.forEach(function(p, index){
    if(p.id == id){
       userToDelete = index;
    }
  });

  $scope.people.splice(userToDelete, 1);
 }

Here is a plunker example. https://plnkr.co/edit/GbKHSER1r992D5ImXJ7n?p=preview

edited May 1, 2017 at 15:53

answered May 1, 2017 at 14:44

Surjeet Bhadauriya

7,2223 gold badges39 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Jośe Over a year ago

so for my deletePeople function(id), can I do something like this: var index = $scope.people.indexOf(people); $scope.people.splice($index, 1);

Surjeet Bhadauriya Over a year ago

Yaa sure, If you are using ng-repeat then you can pass index in ng-click function and based on that index you can remove a particular person or this way also you can do the same.

Jośe Over a year ago

what if I am not using ng-repeat. Can you show me the function you have implement it?

Surjeet Bhadauriya Over a year ago

Your people contains which things can you mention here?

Jośe Over a year ago

it contains myObject

|

mazipan · Accepted Answer · 2017-05-01 14:33:11Z

0

You must fill ng-click action to your function in your controller. If your button was in ng-repeat maybe you must sent parameter in you delete function.

answered May 1, 2017 at 14:33

mazipan

1832 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to make delete button delete a user in AngularJS?

2 Answers 2

12 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related