角 - 推回阵拼接后 [英] Angular - push back to array after splice

问题描述

我用下一个指令拼接数组，如果图片src错误。

I'm using next directive to splice array if image src error.

myApp.directive("noImage", function () {
    return {
        link: function (scope, element, attrs) {
            element.bind("error", function () {
                var idx = scope.posts.indexOf(scope.post);
                scope.$apply(function () {
                    scope.posts.splice(idx, 1);
                });
            });
        }
    };
});

，并试图从控制器像与功能推拼接项背。

And trying to push spliced items back with function from controller something like.

$scope.restorePosts = (function() {
      return function() {
          $scope.spliced_posts.forEach(function(x) {
          return $scope.posts.push(x);
        });
        return $scope.spliced_posts = [];
      };
    });

现在的问题是什么，我要补充的指令？
scope.spliced​​_posts.push（scope.post）？

的jsfiddle

推荐答案

如果我是正确的，你要只显示其中没有任何error.jpg图像。

If I'm correct, you want to only show the images that have no "error.jpg" in them.

删除它们，后来将其添加到您的阵列可能不在这里是最好的解决方案。您可以使用过滤器的NG-重复筛选出与error.jpg的图像了。

Removing them and later adding them to your array might not be the best solution here. You can use a filter with your ng-repeat to filter out the images with error.jpg in it.

ng-repeat="post in posts | filter:{ image_url:'!http://example.com/error.jpg'}"

如果其他地方你想一个类添加到确实有它的错误图像，你可以用纳克级的：

If anywhere else you want to add a class to images that DO have the error in it, you can use ng-class:

ng-class="{'no-img': post.image_url=='http://example.com/error.jpg'}" ng-src="{{post.image_url}}"

http://jsfiddle.net/jkrielaars/xxL0qyy6/3/

这样，你的帖子的数组保持不变。如果你想能够显示有和没有error.jpg的职位之间进行切换，你可以切换，而不是改变你的帖子阵列的过滤器。

That way your array of posts remains intact. If you want to be able to toggle between showing the posts with and without error.jpg, you could toggle the filter instead of changing your posts array.

在你的控制器

$scope.myFilter = null;
$scope.toggleFilter = function(){
    if( $scope.myFilter ){
        $scope.myFilter = null;
    }else{
        $scope.myFilter = { image_url:'!http://example.com/error.jpg' };
    }
}

和视图：

<li ng-repeat="post in posts | filter:myFilter">

更新

如果你想要做动态检查，看看如果图像触发一个错误，你可以使用一个指令，就像你原先所使用的，要添加类，或者完全隐藏的元素。我也更新了的jsfiddle。像这样的东西会增加错误类父。你可以将其更改为任何你喜欢的风格你的父母。你也可以选择只从该指令隐藏父直。

If you want to do dynamic checking to see if the image triggers an error, you can use a directive, much like the one you originally used, to add a class, or completely hide the element. I have also updated the JSfiddle. Something like this would add an error class to the parent. You could change this to whatever you like to style your parent. You could also choose to just hide the parent straight from the directive.

myApp.directive("hideNoImage", function () {
    return {
        link: function (scope, element, attrs) {
            element.bind("error", function () {
                element.parent().addClass("error");       
            });
        }
    };
});

这篇关于角 - 推回阵拼接后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！