Removing elements from an array using Angular

Question

Yes, this was asked earlier, and I read all the answers, but nothing works. Therefore, I ask for extra eyes to see if you can find any feature in my code, which makes it not the way it should. (I tried this code and logic somewhere else, and it seems to be working fine). No console errors, by the way

I'm just trying to remove an element from the view when someone clicks x in 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 mind

 <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

Answer 1

You can pass $index to your click function as follows.

 <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 an index parameter too.

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

Hope this helps.

Answer 2

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

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

I also set a breakpoint here, but the code does not pause when I click the delete button:

Looking at the markup, I see no signs of ng-controller="galleryController" , so I don’t see how the galleries fill up in ng-repeat :

Perhaps through this:

If so, this will explain things, since this directive has its own controller. Any additional information will help, and I am sure that we can clarify this.

Answer 3

If I understand your question correctly, if you want to remove a specific element both from the DOM and from an array containing these specific elements, you can do the following:

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

Suppose 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 was helpful.

Answer 4

I made some changes to fix this issue, and you can check it out for this .

The problem was that there was a typo in the html fragment that called removeGalleryItem(galleryItem, $event) . The parameter name should be gallery , not galleryItem , since there is no such object named galleryItem , therefore the parameter value is undefined inside this method. As soon as I fixed it, I managed to get the gallery object as part of 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 removed the $ event attribute from the method declaration and from the html method call, since it did not need it in the above approach.

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