CODEWITHSUNDEEP
angularjs
Subburaj
Subburaj

Reputation: 5192

hide a particular image + angular.js

I have displayed the image using ng-repeat as follows.:

My .html code:

<div class="form-group col-md-4" ng-show="humbnailshow " ng-repeat="x in thumbnail ">
    <label>Thumbamil Images </label>
    <!--<input type="file " ngf-select ng-model="picFile1 " name="file " accept="image/* " ngf-max-size="2MB " ngf-model-invalid="errorFile " required/>-->
    <!-- <input ng-hide="recipeForm.file.$valid " type="file " ngf-select  ng-model="thumbnailImage " ng-show="newthumbnailImageStatus " name="file " accept="image/* " ngf-max-size="2MB "
                                 ngf-model-invalid="errorFile ">   -->
    <i ng-show="recipeForm.file.$error.maxSize ">File too large {{errorFile.size / 1000000|number:1}}MB: max 2M</i>
    <img ng-show="recipeForm.file.$valid " class="thumb " ngf-thumbnail="x ">
    <i class="glyphicon glyphicon-remove " ng-click="thumbnailViewchange(x) " ng-show="x ">Remove</i>
</div>

My js file controller:

$scope.thumbnailViewchange = function (imageUrl) {        
            $scope.newthumbnailImageStatus = true;
            var last = imageUrl.substring(imageUrl.lastIndexOf("/") + 1, imageUrl.length);
            var index = cust.thumbnail.indexOf(last);
            cust.thumbnail.splice(index, 1);                
     }

Now image is displaying like below:

Image1  Image2  Imgae3

Now when I click on the remove icon, that particular image should be hidden.

Upvotes: 0

Views: 344

Answers (3)

Yogen Darji
Yogen Darji

Reputation: 3300

On click of remove you can get direct object which is clicked and get index of that from array.

If you want to "Remove image"

$scope.thumbnail.splice(index, 1);

If you want to "hide image"

$scope.thumbnail[index].shown = false;

Code sample 

img {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
<!DOCTYPE html>
<html ng-app="FormatsApp" ng-controller="LinksController">

<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>

  <meta charset="utf-8" />
</head>

<body>
  <div class="form-group col-md-4" ng-repeat="x in thumbnail | filter: {shown: true} track by $index">
    <label>Thumbamil Images </label>
    <img class="thumb" ngf-thumbnail="x.url">{{x.url}}
    <i class="glyphicon glyphicon-remove" ng-click="thumbnailViewchange(x)" ng-show="x.url">Remove</i>
  </div>
  <!-- Angualr -->
  <script>
    var formatsApp = angular.module('FormatsApp', []);

    formatsApp.controller('LinksController', function LinksController($scope) {
      $scope.thumbnail = [{
          "url": "image1",
          "shown": true
        },
        {
          "url": "image2",
          "shown": true
        },
        {
          "url": "image3",
          "shown": true
        }
      ]

      $scope.thumbnailViewchange = function(x) {
        var index = $scope.thumbnail.indexOf(x)
        //If you want to "Remove image"
        $scope.thumbnail.splice(index, 1);
        //If you want to "hide image"
        //$scope.thumbnail[index].shown = false;
      }
    });
  </script>
</body>

</html>

Upvotes: 1

user1608841
user1608841

Reputation: 2475

Please try following code :

HTML :

<div class="form-group col-md-4" ng-show="thumbnailshow" ng-repeat="x in thumbnail">
    <label>Thumbamil Images </label>
    <!--<input type="file" ngf-select ng-model="picFile1" name="file" accept="image/*" ngf-max-size="2MB" ngf-model-invalid="errorFile" required/>-->
    <!-- <input ng-hide="recipeForm.file.$valid" type="file" ngf-select  ng-model="thumbnailImage" ng-show="newthumbnailImageStatus" name="file" accept="image/*" ngf-max-size="2MB"
                             ngf-model-invalid="errorFile">   -->
    <i ng-show="recipeForm.file.$error.maxSize">File too large {{errorFile.size / 1000000|number:1}}MB: max 2M</i>
    <img ng-show="recipeForm.file.$valid" class="thumb" ngf-thumbnail="x">
    <i class="glyphicon glyphicon-remove" ng-click="thumbnailViewchange($index)" ng-show="x">Remove</i>
</div>

and In controller :

$scope.thumbnailViewchange = function (index) { 
    //Do your stuff here    
    $scope.thumbnail.splice(index, 1);      
 }

EDIT

If you want to only hide then HTML : 

<div class="form-group col-md-4" ng-hide="x.hide" ng-repeat="x in thumbnail">
    <label>Thumbamil Images </label>
    <!--<input type="file" ngf-select ng-model="picFile1" name="file" accept="image/*" ngf-max-size="2MB" ngf-model-invalid="errorFile" required/>-->
    <!-- <input ng-hide="recipeForm.file.$valid" type="file" ngf-select  ng-model="thumbnailImage" ng-show="newthumbnailImageStatus" name="file" accept="image/*" ngf-max-size="2MB"
                             ngf-model-invalid="errorFile">   -->
    <i ng-show="recipeForm.file.$error.maxSize">File too large {{errorFile.size / 1000000|number:1}}MB: max 2M</i>
    <img ng-show="recipeForm.file.$valid" class="thumb" ngf-thumbnail="x">
    <i class="glyphicon glyphicon-remove" ng-click="thumbnailViewchange($index)" ng-show="x">Remove</i>
</div>

and controller : 

$scope.thumbnailViewchange = function (image) { 
    //Do your stuff here    
    image.hide = true;     
 }

check this fiddle

Upvotes: 2

Nikita
Nikita

Reputation: 437

I have given id to image like this id="unit-image-{{id}}" . Pass that id in "thumbnailViewchange" function instead of url and add $("#unit-image-" + id).fadeOut(); in controller, using this image will become hide. Hope it will help you.

Upvotes: 0

Related Questions