Delete json object from directive

Question

hello I want to delete json in angularjs

for the first time I only use ng-repeat directive

<div ng-repeat="artworkItem in artworksItems | filter: {category:'artworks'}| filter:query" class="">
    <p>{{artworkItem.name}}</p>
    <button ng-click="remove($index)">delete</button>
</div>

controller

ItemFactory.get().then(function(data) {
      $scope.artworksItems = data;
});
$scope.remove= function(index){
        $scope.artworksItems.splice(index, 1);
}

it works. Then i try to move it with directive. so my code will be like this

<div ng-repeat="artworkItem in artworksItems | filter: {category:'artworks'}| filter:query" class="">
    <grid-artworks data="artworkItem"></grid-artworks>
</div>

directive.html

<div>
    <div class=" col-xs-6 col-sm-4 col-md-3 productThumbnail">
        <a href="#/Artworks/{{data.id}}" class="">
            <img ng-src="{{data.imgUrl}}" alt="{{data.name}}" class="img-responsive">
            </a>
            <div class="caption">
                <p class="title text-center">{{data.name}}</p>
                <p class="text-center">{{data.priceTotal}} {{data.curency}}</p>
                <button ng-click="remove($index)">d</button>            
            </div>

    </div>
</div>

directive.js

angular
    .module('app.directives.gridViewArtworks',[])
    .directive('gridArtworks',function()
    {
        return{
            restrict:'E',
            scope:{
                data: '='
            },
            transclude:true,
            replace:true,
            templateUrl:"templates/directives/gridViewArtworks.html",
            controller:function($scope){
                console.log($scope.data);
            }
        };
    }
);

controller

ItemFactory.get().then(function(data) {
                $scope.artworksItems = data;
            });
            $scope.remove= function(index){
                $scope.artworksItems.splice(index, 1);
            }

with directive I can't delete the item. Please help me why can't I delete the data.

Always pass whole object in and do your own indexing when using filter. Index of filtered array is not same as index of original array. Create a live demo in plunker — charlietfl, May 28 '17 at 18:52
Try passing an object with single key and the data array as a value. — Yonatan Vainer, May 28 '17 at 18:52
@charlietfl sorry im still new at this. you mean i need to delete this `| filter: {category:'artworks'}`? and how to indexing when using filter. do you have any reference sir? thank you — GerryofTrivia, May 28 '17 at 19:10
No I am saying that the array that the filter creates is not the same as original array ... so indexing of the two arrays for same object is different. See https://stackoverflow.com/questions/15453979/how-do-i-delete-an-item-or-object-from-an-array-using-ng-click/15454424#15454424 — charlietfl, May 28 '17 at 19:16

score 1 · Accepted Answer · answered May 28 '17 at 19:28

1

Pass a callback to your directive from the controller, which will be triggered from removing the element from the array.

scope:{
  data: '=',
  onRemove: '&'
},

Then when you call the directive:

<grid-artworks data="artworkItem" on-remove="remove(id)"></grid-artworks>

And inside your directive:

<button ng-click="onRemove({id: data.id})">d</button>

And change your remove function in the controller in order to use the id for removing elements from the array, because it's safer than the $index:

$scope.remove= function(id){
  $scope.artworksItems.splice($scope.artworksItems.findIndex(el => el.id === id), 1);
}

answered May 28 '17 at 19:28

quirimmo

9,800
3
30
45

thanks you for reply, your code work. but when i click any button delete, its always delete the last item. when i try to delete the first item it delete the last item. – GerryofTrivia May 28 '17 at 19:34
can you add a `console.log(id);` inside the remove function in order to see if the id is passed correctly please? – quirimmo May 28 '17 at 19:35
im sorry i just change from data to artworkItem: '=data' yo make it easier to read. your code is working. thank you sir – GerryofTrivia May 28 '17 at 19:37

score 0 · Answer 2 · answered May 28 '17 at 18:55

You could pass index as an attribute.

<grid-artworks data="artworkItem" index="{{$index}}"></grid-artworks>

You'll need to add it to your directive's scope.

scope: {
  index: '@',
// ...

And then you can use it.

<button ng-click="remove(index)">d</button>

Alternatively, you should be able to do remove(data):

var index = $scope.artworksItems.indexOf(data);
$scope.artworksItems.splice(index, 1);

Delete json object from directive

2 Answers2