Question

我使用ng-repeat显示图像如下：

我的.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

现在，当我点击删除图标时，应该隐藏该特定图像。

Answer 1

请尝试以下代码：

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

Answer 2

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

Answer 3

我已经像这样id="unit-image-{{id}}"给了图片ID。将该ID传递给＆＃34; thumbnailViewchange＆＃34;函数而不是url并在控制器中添加$("#unit-image-" + id).fadeOut();，使用此图像将变为隐藏。希望它会对你有所帮助。

隐藏特定图像+ angular.js

3 个答案: