如何使删除按钮删除AngularJS中的用户?

时间:2017-05-01 14:07:37

标签: angularjs

我是AngularJS的新手,我需要一些帮助,试图删除按钮,删除AngularJS中的用户。如果有人能提供帮助,我将感激不尽。提前致谢。

  

这是我创建的删除按钮

<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];


   });
  }]);

2 个答案:

答案 0 :(得分:2)

因此在ng-click中调用名为deleteUser的函数并传递您为该用户获取的ID。

//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> 

所以现在你在控制器内部创建一个删除用户的功能。如果您在ng-repeat内使用它,那么您应该相应地传递参数。根据您的代码,您可以通过它。

 //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);
 }

这是一个有关的例子。 https://plnkr.co/edit/GbKHSER1r992D5ImXJ7n?p=preview

答案 1 :(得分:0)

您必须在控制器中对您的功能执行ng-click操作。 如果您的按钮位于ng-repeat,则可能必须在删除功能中发送参数。