Removing items from an array with Angular

Question

Yes, it has been asked before, and I've read all the answers but nothing seems to work. So I'm asking for an extra pair of eyes to see if you can find any singularity in my code that is making it not work as it should. (I tried this code and logic somewhere else and it seems to work fine). No errors in the console by the way

I am simply trying to remove an item from the view when someone clicks the x on the picture.

Here is the controller

app.controller('galleryController', ['$scope', '$http', function($scope, $http) {
    $http.get('data/galleries.json').success(function(data){
        $scope.galleries = data;
    }).error(function(error) {
        console.log(error);
    });

    $scope.removeGalleryItem=function(gallery){
        var removedGallery = $scope.galleries.indexOf(gallery);
        $scope.galleries.splice(removedGallery, 1);
    };
}]);

and my view

<div class="col-xs-12 col-md-3" ng-repeat="gallery in galleries" >
    <a class="gallery-item" ng-href="{{gallery.img}}" ng-class="{true:'active',false:''}[checked]"
       title="Nature Image 1" >
        <div class="image">
            <img ng-src="{{gallery.img}}" alt="Nature Image 1"/>

        </div>
        <div class="meta">
            <strong>{{gallery.title}}</strong>
            <span>{{gallery.desc}}</span>
        </div>
    </a>
    <ul class="gallery-item-controls">
        <li><label class="check"><input type="checkbox" class="icheckbox" ng-model="checked" /></label></li>
        <li><span class="gallery-item-remove"><i class="fa fa-times" ng-click="removeGalleryItem(gallery)"></i></span></li>
    </ul>
</div>

Angular 1.5.8

Thanks

You mean you would like to destroy that particular object both from DOM and Array? — AndreaM16
– AndreaM16, Commented Nov 11, 2016 at 14:02
Good question. Just from the DOM. It's for mocking purposes. Showing clients what would happen when it's all developed. At that time it will be deleted from the database, but not right now — LOTUSMS
– LOTUSMS, Commented Nov 11, 2016 at 14:09
Check my answer. I use Lodash for objects and arrays. It's easy to get rid-off such things with it. Lodash: lodash.com/docs/4.16.6 — AndreaM16
– AndreaM16, Commented Nov 11, 2016 at 14:14

Punit Gajjar · Accepted Answer · 2016-11-14 13:02:54Z

12

+100

You can pass an $index in your click function like this.

<i class="fa fa-times" ng-click="removeGalleryItem(galleryItem, $event , $index)">

and use $scope.galleries.splice(index, 1); inside your click function removeGalleryItem, make sure you have index parameter too like this.

$scope.removeGalleryItem = function(gallery , event, index){
        $scope.galleries.splice(index, 1);
    };

Hope this helps..

edited Nov 14, 2016 at 13:02

answered Nov 14, 2016 at 12:53

Punit Gajjar

5,0077 gold badges39 silver badges73 bronze badges

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

6 Comments

LOTUSMS Over a year ago

It works as long as I have the data in my controller but not when the data lives in a separate file and I remote to it with $http. So, your solution works and I will mark it as a solution, but any idea why it doesn't work as intended? Here is a codepen showing your solution works but if you comment out the data and leave the $http connection to the data file it fails codepen.io/LOTUSMS/pen/eBzNOr

camden_kid Over a year ago

@LOTUSMS I tested that Pen with Chrome and Firefox and the data cannot be retrieved due to Cross-Origin issues, as can be seen in the console.

LOTUSMS Over a year ago

@camden_kid Thank you for looking into this. I pushed the site into a server so that it all lives inside the same domain and origin. joli.sitedev.online/#/gallery But it still not working. Or did I misunderstood what cross-origin is?

camden_kid Over a year ago

@LOTUSMS I've created another Pen from yours - codepen.io/camden-kid/pen/NbrNbg?editors=1010#0 - and Punit Gajjar logic works. The items get removed.

camden_kid Over a year ago

@LOTUSMS - I have put a break point in your code ( joli.sitedev.online/#/gallery) at line 154 in slidesController.js and when I click on the remove button the code does not stop at that break point.

|

LOTUSMS · Accepted Answer · 2016-11-14 17:19:06Z

4

After doing some research I think the problem is that galleryController is defined somewhere in your markup but the elements in the gallery are not inside of where that controller is defined.

Referring to http://joli.sitedev.online/#/gallery. In file slidesController.js where galleryController is defined I put a break here and the code pauses:

I also put a break point here but the code does not pause when clicking on a delete button:

Looking at the markup I can't see any sign of ng-controller="galleryController" so I can't see how galleries in the ng-repeat is populated:

Maybe it is through this:

If it is through that then it would explain things as that directive has its own controller. Any further information would help and I'm sure we can clear this up.

edited Nov 14, 2016 at 17:19

LOTUSMS

10.4k18 gold badges80 silver badges154 bronze badges

answered Nov 14, 2016 at 13:20

camden_kid

12.8k12 gold badges57 silver badges92 bronze badges

Comments

AndreaM16 · Accepted Answer · 2016-11-11 14:13:32Z

1

If I understood correctly your question, if you want to delete a particular element both from DOM and Array containing these particular elements you can do the following:

<!-- Intercept that particular Element with $event-->
<i class="fa fa-times" ng-click="removeGalleryItem(galleryItem, $event)">

Lets supposing you are repeating some galleryItems and they have a name property.

And on your controller:

$scope.removeGalleryItem(galleryItem, $event){
    //Save galleryItem Name
    var itemName =  $($event.currentTarget).name(); // if it has it on html
    var itemName = galleryItem.name; // if it has a property
    //Get the target and remove it
    $($event.currentTarget).remove();

    //Using lodash, loop through your array and remove that exact object from it. 
    //Ofc you can do a normal loop through it.
    $scope.galleries = _.remove($scope.galleries, function(n) {
       return n  != itemName;
    });

    //Then, if the change does not happen in your DOM
    $scope.$apply();

}

Hope I've been helpful.

answered Nov 11, 2016 at 14:13

AndreaM16

4,0055 gold badges37 silver badges78 bronze badges

6 Comments

LOTUSMS Over a year ago

Unfortunately, nothing happened

AndreaM16 Over a year ago

Try: console.log($($event.currentTarget)); and tell me the result.

LOTUSMS Over a year ago

Well, it threw an error but it went away when I added it into a function. I'll run it again

LOTUSMS Over a year ago

Nothing. Console is silent

AndreaM16 Over a year ago

Have you tried with angular.element('.class').remove?

|

TheCrinventor · Accepted Answer · 2016-11-21 11:03:41Z

I have made some changes to fix this issue and you can check it at this link.

The problem here was that there was a typo in the html snippet that was calling the removeGalleryItem(galleryItem, $event). The parameter name should have been gallery, not galleryItem, since there is no such object by the name galleryItem, hence inside this method, the parameter value was undefined. Once I fixed it, I was able to get the gallery object within the removeGalleryItem method and the following code worked absolutely fine:

$scope.removeGalleryItem=function(gallery){
    var selectedGallery = $scope.galleries.indexOf(gallery);
    $scope.galleries.splice(selectedGallery, 1);
};

Also note that, I have removed the $event attribute from the method declaration and from the html method call as we didn't need it in the above mentioned approach.

<i class="fa fa-times" ng-click="removeGalleryItem(gallery)"></i>

Collectives™ on Stack Overflow

Removing items from an array with Angular

4 Answers 4

6 Comments

Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related