Question

如果图像src错误，我使用next指令拼接数组。

body {
  padding-top: 50px;
}

尝试用控制器中的函数来推回拼接项目。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h2 class="well well-sm">Default</h2>

  <div class="input-group bootstrap-timepicker timepicker">
    <input id="timepickermailingtoupsummary" type="text" class="form-control"> <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>

  </div>
  <hr>
  <h2 class="well well-sm">Small</h2>

  <div class="input-group bootstrap-timepicker timepicker input-group-sm">
    <input type="text" class="form-control"> <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>

  </div>
  <hr>
  <h2 class="well well-sm">Large</h2>

  <div class="input-group bootstrap-timepicker timepicker input-group-lg">
    <input type="text" class="form-control"> <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>

  </div>
</div>

问题是我应该添加什么指令？ 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); }); }); } }; });？

JSFIDDLE

Answer 1

如果我是正确的，你只想显示其中没有“error.jpg”的图像。

删除它们以及稍后将它们添加到阵列可能不是最佳解决方案。您可以使用带有ng-repeat的过滤器来过滤掉带有error.jpg的图像。

List<Show>

如果您想在其他任何地方为要出错的图像添加类，您可以使用ng-class：

select * from (
select OWNER,a,STARTIME,Server_Group,filename,b ,row_number() over (order by STARTIME desc ) rnm from
(
  SELECT 
    OWNER||','||HOSTNAME OWNER,
    SubStr(FILENAME,InStr(FILENAME,'/',-1)+1,Length(FILENAME)-InStr(FILENAME,'/',-1)+1)  a, 
To_Date(SubStr(FILENAME,InStr(filename,'_',1)+1,14),'YYYYMMDDHH24MISS') STARTIME,
    servergrp Server_Group,
    filename, 
    Count(1) b  
  FROM patcheventlog  
  GROUP BY 
    OWNER||','||HOSTNAME ,
    SubStr(FILENAME,InStr(FILENAME,'/',-1)+1,Length(FILENAME)-InStr(FILENAME,'/',-1)+1)  ,  
    To_Date(SubStr(FILENAME,InStr(filename,'_',1)+1,14),'YYYYMMDDHH24MISS') ,
    servergrp,
    filename 
   ORDER BY 
    Startime desc )
) WHERE rnm BETWEEN 2 AND 7

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

这样你的帖子数组保持不变。如果您希望能够在显示有和没有error.jpg的帖子之间切换，您可以切换过滤器而不是更改帖子数组。

控制器中的

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

并在视图中：

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

<强>更新

如果要进行动态检查以查看图像是否触发错误，可以使用与最初使用的指令非常相似的指令来添加类，或者完全隐藏元素。我还更新了JSfiddle。像这样的东西会给父级添加一个错误类。您可以将此更改为您喜欢的任何样式，以便为您的父级设您也可以选择直接隐藏父指令。

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

Answer 2

使用angular.copy()复制您从api收到并存储在服务中的原始数组

Angular - 在拼接后推回阵列

2 个答案: