隱藏特定圖像+ angular.js

我已經顯示使用ng-repeat圖像如下：隱藏特定圖像+ angular.js

我的html的代碼：

<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>

我的JS文件的控制器：

$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);     
    }

現在圖像顯示如下：

Image1 Image2 Imgae3

現在，當我點擊刪除圖標時，應該隱藏該特定圖像。

來源

2017-08-29 Subburaj

請嘗試以下代碼：

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>

，並在控制器：

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

編輯

如果你只想隱藏然後 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>

和控制器：

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

檢查這個fiddle

來源

2017-08-29 06:04:09 Rahul

我已經給ID圖像這樣id="unit-image-{{id}}"。在「thumbnailViewchange」函數中傳遞該id而不是url，並在控制器中添加$("#unit-image-" + id).fadeOut();，使用此圖像將變爲隱藏。希望它能幫助你。

來源

2017-08-29 06:12:02 Nikita

點擊remove你可以得到被點擊的直接對象並從數組中獲得該對象的索引。

如果你想「刪除圖像」

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

如果你想「隱藏圖像」

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

代碼示例

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>

來源

2017-08-29 06:15:24

隱藏特定圖像+ angular.js

回答

相關問題