使用Angular从阵列中删除项目

是的，它之前已经被问过了，我已经阅读了所有的答案，但似乎没有任何工作。所以我要求额外的一双眼睛，看看你是否能够在我的代码中发现任何奇点，使它无法正常工作。（我试过这个代码和逻辑的其他地方，它似乎工作正常）。在控制台中没有错误的方式使用Angular从阵列中删除项目

我只是试图从某个视图中删除一个项目，当有人点击图片上的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

感谢

来源

2016-11-11 LOTUSMS

你的意思是你想从DOM和Array中摧毁那个特定的对象？ – AndreaM16

好问题。只是从DOM。这是为了嘲笑的目的。向客户展示当全部开发时会发生什么。那时它会被从数据库中删除，但不是现在 – LOTUSMS

检查我的答案。我使用'Lodash'作为对象和数组。它很容易摆脱这样的事情。 Lodash：https：//lodash.com/docs/4.16.6 – AndreaM16

您可以像这样在您的点击功能中传递$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); 
    };

希望这有助于..

来源

2016-11-14 12:53:16

只要我在控制器中有数据，但不能在数据存在于单独的文件中时使用，而且我使用$ http远程使用它。所以，你的解决方案的工作原理，我将它标记为一个解决方案，但任何想法，为什么它不按预期工作？这是一个codepen，显示你的解决方案的作品，但如果你注释掉数据并且把$ http连接留给数据文件，它就会失败http://codepen.io/LOTUSMS/pen/eBzNOr – LOTUSMS

@LOTUSMS我用Chrome测试了这个Pen，从控制台中可以看出，由于Cross-Origin问题，Firefox和数据无法恢复。 –

@camden_kid谢谢你的关注。我将网站推入服务器，以便它们都位于相同的域和原点内。 http://joli.sitedev.online/#/gallery但它仍然无法正常工作。还是我误解了交叉来源是什么？ – LOTUSMS

如果我理解正确你的问题，如果你想删除来自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(); 

}

希望我一直有帮助。

来源

2016-11-11 14:13:32 AndreaM16

不幸的是，什么都没发生 – LOTUSMS

尝试：'console.log（$（$ event.currentTarget））;'并告诉我结果。 – AndreaM16

嗯，它会抛出一个错误，但当我将它添加到函数中时它就会消失。我会再次运行它 – LOTUSMS

之后做一些研究，我认为这个问题是galleryController某处定义在您的标记，但在画廊中的元素是不是如该控制器里面定义。

参照http://joli.sitedev.online/#/gallery。在文件slidesController。JS那里galleryController定义我把一个破发在这里和代码暂停：

我也把一个破发点这里，但在一个删除按钮，当点击该代码不会暂停：

望着标记我看不到任何ng-controller="galleryController"迹象，所以我不能看到画廊在ng-repeat如何填充：

也许是通过这个：

如果通过那就说明事情作为指令有其自己的控制器。任何进一步的信息将有所帮助，我相信我们可以清除这一点。

来源

2016-11-14 13:20:01

我已对修复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>

来源

2016-11-21 11:03:41 TheCrinventor

使用Angular从阵列中删除项目

回答

相关问题