使用Angular從陣列中刪除項目

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的特定元素，您可以執行此操作如下：

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

讓我們假設你正在重複一些galleryItems並且它們有一個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鏈接查看它。

這裏的問題是在調用removeGalleryItem(galleryItem, $event)的html代碼片段中存在拼寫錯誤。參數名稱應該是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>