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>

Angular 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

在做了一些研究后，我认为问题是 galleryController 是在标记的某处定义的，但是图库中的元素不在控制器定义的位置。

参考http://joli.sitedev.online/#/gallery。在文件slidesController.js中定义了galleryController我在这里放了一个休息并且代码暂停：

我还在这里设置了一个断点，但是当点击删除按钮时代码不会暂停：

查看标记我看不到ng-controller="galleryController"的任何迹象，因此我无法看到ng-repeat中的图库是如何填充的：

也许是通过这个：

如果是通过那个，那么它会解释事情，因为该指令有自己的控制器。任何进一步的信息都会有所帮助，我相信我们可以解决这个问题。

Answer 3

如果我正确理解了您的问题，如果您想删除包含这些特定元素的DOM和Array中的特定元素，您可以执行以下操作：

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

假设您正在重复一些galleryItem并且它们具有名称属性。

在你的控制器上：

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

我已修改this问题进行了一些更改，您可以在this链接进行检查。

这里的问题是html代码段中有一个拼写错误，正在调用removeGalleryItem(galleryItem, $event)。参数名称应为gallery，而不是galleryItem，因为名称galleryItem没有此类对象，因此在此方法中，参数值为undefined。一旦我修复它，我就可以在removeGalleryItem方法中获取gallery对象，并且以下代码完全正常：

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

另请注意，我已从方法声明和html方法调用中删除了$ event属性，因为我们在上述方法中并不需要它。

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

使用Angular从数组中删除项目

4 个答案: