Issue
I am not able to hide image.
I am fetching the image details from database and showing them in grid format. Here is the code:
<div ng-repeat="imageUrl in images" class="col-xs-3 img-wrap">
<span class="close" id="close">×</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>
and here is more code:
$scope.myFunc = function(btnId) {
alert(btnId);
document.getElementById(btnId).style.visibility = "visible";
};
I want to hide the respective image. There could be multiple image but image id is different. So, what I want is when user click on any image it will hide.
How can I do that?
Solution
First of all Don't use getElementById.In angular you can simple bind the $scope variable.
Have a variable with the image object to show/hide. Make it true or false when you need to show/not.
On ng-click you can set the variable to be false. bind the variable to the element, so that you can hide whenever necessary.
<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>Answered By - Sajeetharan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.