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
– charlietfl, Commented May 28, 2017 at 18:52
Try passing an object with single key and the data array as a value. — Yonatan Vainer
– Yonatan Vainer, Commented May 28, 2017 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
– GerryofTrivia, Commented May 28, 2017 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 stackoverflow.com/questions/15453979/… — charlietfl
– charlietfl, Commented May 28, 2017 at 19:16

quirimmo · Accepted Answer · 2017-05-28 19:28:42Z

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, 2017 at 19:28

quirimmo

10k3 gold badges33 silver badges46 bronze badges

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

3 Comments

GerryofTrivia Over a year ago

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.

quirimmo Over a year ago

can you add a console.log(id); inside the remove function in order to see if the id is passed correctly please?

GerryofTrivia Over a year ago

im sorry i just change from data to artworkItem: '=data' yo make it easier to read. your code is working. thank you sir

Kevin Lee Drum · Accepted Answer · 2017-05-28 18:55:14Z

0

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

answered May 28, 2017 at 18:55

Kevin Lee Drum

135 bronze badges

Collectives™ on Stack Overflow

Delete json object from directive

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related