隐藏图像来自ng-repeat的角度

问题很简单，但我无法隐藏图像。这是代码。隐藏图像来自ng-repeat的角度

我从数据库中提取图像细节并以网格格式显示它们。这是代码。

<span class="close" id="close">&times;</span> 
    <div class="my-gallery" itemscope id="grid" > 

    <figure itemprop="associatedMedia" > 

    <a href="{{imageUrl}}" id="thumb" name="{{pid[$index]}}" class="thumbnail " itemprop="contentUrl" data-id="{{pid[$index]}}" data-size="800x600"> 
    <img src="" class="img-responsive " data-id="{{pid[$index]}}" id="{{pid[$index]}}" ng-src="{{thumb[$index]}}" style="min-height:50px;height:50px;"> 
    </a> 

    </figure> 

</div> 
</div>

这里有更多的代码。

$scope.myFunc = function(btnId) { 
     alert(btnId); 
document.getElementById(btnId).style.visibility = "visible"; 

};

我想隐藏各自的图像。可能有多个图像，但图像ID是不同的。所以，我想要的是当用户点击它将隐藏的任何图像。

请告诉我该怎么做。

来源

2017-02-12 Ironic

首先不要使用getElementById。在角可以简单绑定的$scope变量。

将图像对象的变量设置为show/hide。当您需要show/not时，请将其设为真或假。

对ng-click您可以将变量设置为false。将变量绑定到元素，以便您可以随时隐藏。

<div ng-if="img.show"> 
<img src="" class="img-responsive " data-id="{{pid[$index]}}" id="{{pid[$index]}}" ng-src="{{thumb[$index]}}" style="min-height:50px;height:50px;"> 
    </a> 
</div>

DEMO

angular.module('webapp', []) 
 
    .controller('AppCtrl', function($scope) { 
 
    $scope.data = [ 
 
    { 
 
    "id": 5454554, 
 
    "Url":  "https://farm4.staticflickr.com/3261/2801924702_ffbdeda927_d.jpg", 
 
    "show":true 
 
     }, 
 
     { 
 
    "id": 5454554, 
 
    "Url":  "https://farm4.staticflickr.com/3261/2801924702_ffbdeda927_d.jpg", 
 
    "show":true 
 
     } 
 
    ]; 
 
    $scope.hide = function(img){ 
 
    img.show = false; 
 
    } 
 
    
 
    });

<!DOCTYPE html> 
 
<html ng-app="webapp"> 
 
<head> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script> 
 
</head> 
 
<body ng-controller="AppCtrl"> 
 
<div class="add-pic-box1 col-md-3"> 
 
    <div ng-repeat="img in data" >  
 
     <div ng-if="img.show"> 
 
    <img class="thumb" ng-model="add_new_ads_mdl.img_add" imgid = "{{img._id}}" src="{{img.Url}}" /> 
 
     <button ng-click="hide(img)"> HIDE ME </button> 
 
     </div >  
 
    </div> 
 
     
 
    </div> 
 
</body> 
 
</html>

与$事件

来源

2017-02-12 17:53:06 Sajeetharan

谢谢你的回答，但我需要添加在函数（btnId）{。我正在学习角度。抱歉提出愚蠢的事情。投了票。 – Ironic

@CalculatingMachine检查演示，我添加了一个功能点击按钮 – Sajeetharan

可以使用NG单击

<div ng-app="app" ng-controller="Ctrl"> 
    <a href="#" ng-click="removeMe($event)">Click me</a> 
</div> 

app.controller("Ctrl", function($scope) { 
    $scope.removeMe = function(event) { 
    event.toElement.remove() 
    }; 
});

Example

来源

2017-02-12 18:10:59

隐藏图像来自ng-repeat的角度

回答

相关问题