All geek questions in one place

How to delete the line where ng-click is located?

In the following code, when I delete the client, I want the TR line to disappear.

What is the best way to do this? Do I need to send a string as the deleteCustomer parameter? Do I have access to the TR DOM element inside AngularJS?

<html ng-app="mainModule"> <head> <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> </head> <body ng-controller="mainController" style="padding: 20px"> <div class="col-lg-5"> <table style="width: 500px" class="table-striped table-bordered table table-hover"> <tr ng-repeat="customer in customers"> <td style="width:50px"><button ng-click="deleteCustomer(customer)">Delete</button></td> <td style="text-align:right">{{customer.id}}</td> <td>{{customer.firstName}}</td> <td>{{customer.lastName}}</td> </tr> </table> </div> <div class="col-lg-7"> <div class="panel panel-info"> <div class="panel-heading">Logger</div> <div class="panel-body" style="padding:0"> <table class="table table-bordered" style="margin:0"> <tr ng-repeat="loggedAction in loggedActions"> <td>{{loggedAction.action}}</td> <td>{{loggedAction.description}}</td> </tr> </table> </div> </div> </div> <script> var mainModule = angular.module('mainModule', []); function mainController($scope) { $scope.loggedActions = []; $scope.customers = [ {id: 1, firstName: 'Joe', lastName: 'Thompson'}, {id: 2, firstName: 'Hank', lastName: 'Howards'}, {id: 3, firstName: 'Zoe', lastName: 'Frappe'} ]; $scope.deleteCustomer = function (customer) { $scope.$emit('customerDeleted', customer); }; $scope.$on('customerDeleted', function (event, customer) { $scope.loggedActions.push({action: 'delete', description: 'Deleted customer ' + customer.firstName + ' ' + customer.lastName}); }); } </script> </body> </html>
+5
source share
2 answers

EDIT:

as pointed out by @ K.Toress comment, it is better to get the index of the remote client via indexOf () from within the function, rather than passing the index $ index from ng-repeat. passing $ index will give unexpected results when using a filter or sorting an array.

deleteCustomer:

 $scope.deleteCustomer = function (customer) { var index = $scope.customers.indexOf(customer); $scope.customers.splice(index, 1); $scope.$emit('customerDeleted', customer); };

updated plnkr

you can use the $ index provided by ng-repeat and array.splice from the delete function:

HTML:

 <button ng-click="deleteCustomer($index, customer)">Delete</button>

JS:

 $scope.deleteCustomer = function ($index, customer) { $scope.customers.splice($index, 1); $scope.$emit('customerDeleted', customer); };

plnkr

+8
source

Working example:

http://plnkr.co/edit/7MOdokoohX0mv9uSWuAF?p=preview

 var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.data = ['a', 'b', 'c', 'd', 'e']; $scope.delete = function(at) { $scope.data.splice(at, 1); } });

Template:

  <body ng-app="plunker" ng-controller="MainCtrl"> <p>Hello {{name}}!</p> <div ng-repeat="elem in data"> {{elem}} <button ng-click="delete($index)">delete {{elem}}</button> </div> </body>
+1
source

Source: https://habr.com/ru/post/1210552/

More articles:


All Articles