Извлечение предметов из массива с угловым

Question

Да, это было задано раньше, и я прочитал все ответы, но ничего не работает. Поэтому я прошу дополнительных глаз, чтобы увидеть, можете ли вы найти какую-либо особенность в моем коде, что делает его не так, как должно. (Я пробовал этот код и логику где-то еще, и, похоже, он работает нормально). Никаких ошибок в консоли, кстати,

Я просто пытаюсь удалить элемент из представления, когда кто-то щелкает x на картинке.

Вот контроллер

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

и мой взгляд

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

Угловые 1.5.8

Благодаря

Answer 1

Вы можете передать $index в свою функцию щелчка следующим образом.

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

и использовать $scope.galleries.splice(index, 1); внутри функции мыши removeGalleryItem, убедитесь, что у вас есть параметр индекса тоже вроде этого.

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

Надеется, что это помогает ..

Answer 2

Если я правильно понял ваш вопрос, если вы хотите удалить конкретный элемент как из DOM, так и Array, содержащий эти конкретные элементы, вы можете сделать fo llowing:

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

Предположим, что вы повторяете некоторые элементы галереи, и у них есть свойство name.

А на контроллере:

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

} 

Надежда Я был полезным.

Answer 3

После выполнения некоторых исследований я думаю, что проблема в том, что galleryController определяется где-то в разметке, но элементы в галерее не внутри, где определен, что контроллер ,

Ссылаясь на http://joli.sitedev.online/#/gallery. В файле slidesController.JS, где galleryController определен я положил перерыв здесь и код паузы:

Я также поставил точку останова здесь, но код не останавливается при нажатии на кнопку Удалить:

Глядя на разметке я не вижу никаких признаков ng-controller="galleryController", так что я не могу видеть, как галереи в ng-repeat населен:

Может быть, именно через это:

Если через это, то было бы объяснить вещи, как эта директива имеет свой собственный контроллер. Любая дополнительная информация поможет, и я уверен, что мы сможем это прояснить.

Answer 4

Я внесли некоторые изменения, чтобы исправить ошибку this, и вы можете проверить ее по ссылке this.

Проблема заключалась в том, что в html-фрагменте была опечатка, которая вызывала removeGalleryItem(galleryItem, $event). Имя параметра должно быть gallery, а не galleryItem, так как такого объекта нет по имени galleryItem, поэтому внутри этого метода значение параметра было undefined. После того, как я установил его, я был в состоянии получить объект галереи в рамках метода removeGalleryItem и следующий код работает абсолютно нормально:

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

отметить также, что я удалил атрибут $ событий из объявления метода и от html, поскольку мы не нуждались в этом в вышеупомянутом подходе.

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