Question

我有一个角度js的图像库，其中包含多个图像。当用户单击图像时，我想添加样式（在本例中为边框）。如果再次单击其中一个所选图像，我想删除边框。我有工作在点击时添加/删除imageURL到“selected_images”数组但我无法添加/删除样式。

这是我的标记：

    <div class="col-md-3 col-sm-4 col-xs-6" ng-repeat="imageURL in property.imageURLs">
        <img src={{imageURL}} ng-click="select_image(imageURL)" class="img-responsive" ng-class="{ 'selected-image': image_is_selected(image) }" style="max-height: 120px;" alt="" title="">
</div>

和js：

$scope.image_is_selected = function(image) {
        if($scope.selected_images.indexOf(image) == -1) {
            return false;
        } else {
            return true;
        }
    }

    $scope.select_image = function(image) {
        console.log('image: ' + image);
        var image_index = $scope.selected_images.indexOf(image)
        console.log('image index: ' + image_index);
        if(image_index != -1) {
            $scope.selected_images.splice(image_index, 1);
        } else {
            $scope.selected_images.push(image);
        }
    }

这显然不起作用，因为image_is_selected被多次调用......这里最好的做法是什么？

Answer 1

您可以使用ng-click切换每个图片上的属性来简化操作：

<div class="col-md-3 col-sm-4 col-xs-6" ng-repeat="image in property.images">
  <img src={{image.URL}} 
  ng-click="image.selected = !image.selected"  
  ...

然后ng-class就是：

  ng-class="{ 'selected-image': image.selected }"

如果您想亲自试用代码here it is on Plunkr。

要保留现有的数据结构，您可以使用每个图像的selected属性动态填充对象：

<div class="col-md-3 col-sm-4 col-xs-6" ng-repeat="image in property.imageURLs">
  <img src={{image}} 
  ng-click="selected_images[image] = {selected: !selected_images[image].selected }"
  ng-class="{ 'selected-image': selected_images[image].selected }"

但这需要提前创建selected_images：

$scope.selected_images = {};

http://plnkr.co/edit/O3MUv0aT81O1PaEnRbQv?p=preview

Answer 2

试试看，我帮助你

ng-单击图像添加类，然后再次单击图像删除类

这是Html文件

 <html ng-app="plunker">
     <head>
        <meta charset="utf-8" />
        <title>AngularJS Plunker</title>
           <link rel="stylesheet" href="style.css" />
           <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.16/angular.js" data-semver="1.2.16"></script>
           <script src="script.js"></script>
     </head>
<body ng-controller="MainCtrl">
    <div ng-repeat="image in images">
       <img src={{image.img}} ng-click="selectImage($index)" ng-class="{ 'selected-image': $index === selectIdx }" >
    </div>
</body>
</html>

这是控制器

 var app = angular.module('plunker', []);
 app.controller('MainCtrl', function($scope) {
    $scope.images = [
        {img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHIwFa7lBRjCtY5K2WLGRuJ5XcXOwTUdgPPE1JKJHWEaoaG0Yh'},
        {img: 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTOAn_TGFgVS9CIW0y1hJ3deENr6KJx0AWP6W8FPvNDRcO-K5MyXg'},
        {img: 'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR0In9KzRbpbnrVC5U1URXjHuQoTVhDjuemydVBzgJbPogvqaHa'}
    ]

 $scope.selectIdx = -1;
 $scope.selectImage = function ( $index ) {
  if($scope.selectIdx === $index) {
     $scope.selectIdx = -1;
   } else {
      $scope.selectIdx = $index;
   }
  }
});

这是Css文件

 .selected-image {
 border: 5px solid black; 
 }

Plunker Link http://plnkr.co/edit/tm3rpkiKMBxhX98yr0IX?p=preview

Answer 3

有很多方法可以达到您的要求。我将尝试解释其中一个我认为最适合您的要求。请记住，使用ng-repeat时，您已经引用了＆＃34; $ index＆＃34;并且你可以将它直接传递给你在ng-click中可能有的任何表达式。这是一个解决方案：

HTML：

<div class="col-md-3 col-sm-4 col-xs-6" 
     ng-repeat="imageURL in property.imageURLs">
    <img src={{imageURL}} 
      ng-click="select_image($index)" 
      class="img-responsive" 
      ng-class="{ 'selected-image': $index === selectedImageIndex }" 
      style="max-height: 120px;" alt="" title="">
</div>

代码：

$scope.selectedImageIndex = -1;
$scope.select_image = function ( $index ) {
    $scope.selectedImageIndex = $index;
}

Answer 4

如果您不想将property.imageURLs变量的结构更改为对象数组，那么我认为最好创建另一个变量$scope.selected = []来存储布尔值以确定按索引选择每个图像。

实施例

<强> HTML

<div class="gallery">
  <img ng-repeat="url in imageUrls track by $index" ng-src="{{url}}" ng-class="{'selected-image': selected[$index]}" ng-click="selected[$index] = !selected[$index]" />
</div>

<强> JAVASCRIPT

$scope.selected = []

如果您已准备好保存这些所选项目并将其存储在数组中，则可以将其附加到控制器中

<强> JAVASCRIPT

  $scope.save = function() {
    var selectedImages = []

    angular.forEach($scope.selected, function(isSelected, index) {
      if(isSelected)
        selectedImages.push($scope.imageUrls[index])
    })

    // Save your images
    console.log(selectedImages)
  }

请参阅上述示例的相关plunker。

注意：正如您所看到的，我已经使用了track by $index ng-repeat，这是为了确保即使有多个图像具有相同的网址，也不会产生重复错误。

Answer 5

试试这个

<div class="col-md-3 col-sm-4 col-xs-6" ng-repeat="imageURL in property.imageURLs">
        <img src={{imageURL}} ng-click="select_image(imageURL)" class="img-responsive" ng-class="{active: isActive(imageURL)}" style="max-height: 120px;" alt="" title="">
</div>

现在在您的控制器中

$scope.select= function(item) {
        $scope.selected = item; 
 };

 $scope.isActive = function(item) {
        return $scope.selected === item;
 };

.active类将添加到所选图像中。

您可以将样式添加到活动类

More Info

angular js在点击时向图库中的图像添加类

5 个答案:

实施例