角度のある配列からアイテムを削除する

Question

はい、これまでに質問されていますが、すべての答えを読みましたが、何も動作していないようです。だから私は目の余分なペアを求めて、あなたが私のコードでそれがうまく動かないようにする特異点を見つけることができるかどうかを見ています。 （私はこのコードとロジックを別の場所で試してみましたが、うまくいくようです）。途中でコンソールにエラーがない

誰かが画像上のxをクリックしたときに、単にアイテムをビューから削除しようとしています。私が正しくあなたの質問を理解している場合、削除したい場合はここで

は、

<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を渡すことができます。あなたのクリック機能removeGalleryItem内部

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

と使用$scope.galleries.splice(index, 1);、あなたもこのようなインデックスパラメータを持っていることを確認してください。

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

・ホープ、このことができます。..

Answer 2

コントローラ

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

と私の見解でありますこれらの特定の要素を含むDOMとArrayの特定の要素llowing：

<!-- 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内。

私もここにブレークポイントを置くが、削除ボタンをクリックすると、コードが一時停止しません：

をgalleryControllerが、私はここで休憩を入れて定義され、コードが一時停止しているJS

私はので、私はどのように移入されギャラリーng-repeatで見ることができないng-controller="galleryController"の兆候を見ることができないマークアップを見て：

多分それは、この経由です：

それは通過である場合は、そのディレクティブが独自のコントローラを持っているとして、それは物事を説明するだろう。これ以上の情報があれば、私たちはこれをクリアできると確信しています。

Answer 4

私はthis号を修正するためにいくつかの変更を加えました。それはthisリンクで確認できます。

ここでの問題は、removeGalleryItem(galleryItem, $event)を呼び出すhtmlスニペットにタイプミスがあったことです。 galleryItemという名前のオブジェクトがないため、galleryItemではなく、galleryItemというパラメータ名はgalleryである必要があります。したがって、このメソッドの内部では、パラメータ値は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>