Show/hide an element in array with AngularJS and javascript

Question

I want to display extra information on click of an item in ng-repeat and hide this on mouseleave from this item.

In the code snippet below, when a user clicks on another item, this opens extra information for the first item as well.

Code Snippet

$scope.Click = function (object) {
    console.log("Clicked")
    this.showDelete = true;
    $(".Close").fadeIn(); // <- this did not work actually
}

$(document).mouseup(function (e) {
   !$(e.target).closest('.Close').length && $('.Close').fadeOut();
});

<div ng-repeat="item in items">
   <div ng-click="Click()">{{item.object}}</div>
   <div class="button Close" ng-show="showDelete">delete</div>
</div>

I want to show extra information only for one item at a time.

Please help me to correct my code snippet

You should use $scope.showDelete instead of this.showDelete. — Luiz Carlos
– Luiz Carlos, Commented Sep 5, 2018 at 17:18
If the showDelete is a property from the object, you should use: ng-show="Click(item.object.showDelete)" and in your function: showDelete = true — Luiz Carlos
– Luiz Carlos, Commented Sep 5, 2018 at 17:20
$scope.showDelete will show all the delete buttons in the complete ng-repeat, not just the one that i clicked — Ewald Bos
– Ewald Bos, Commented Sep 5, 2018 at 17:47

nkshio · Accepted Answer · 2018-09-05 17:49:50Z

1

Issue is that this.showDelete controls display all the elements strings at once.

Corrected Code Snippet

var app = angular.module("app", []);

app.controller('Ctrl', function($scope) {
  $scope.items = [{object: 'object1'}, {object: 'object2'}, {object: 'object3'}];

  $scope.onClick = function(item) {
      item.showDelete = true;
      $(".Close").fadeIn();
  }
  
  $scope.onLeave = function(item) {
      item.showDelete = false;
      $(".Close").fadeOut();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="app" ng-controller="Ctrl">
  <div ng-repeat="item in items">
     <div ng-click="onClick(item)" ng-mouseleave="onLeave(item)">{{item.object}}</div>
     <div class="button Close" ng-show="item.showDelete">delete</div>
  </div>
</div>

answered Sep 5, 2018 at 17:49

nkshio

1,0801 gold badge14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ewald Bos Over a year ago

exactly the issue i was having indeed, very elegant solution. works. thank you very much for your help, regards Ewald

Collectives™ on Stack Overflow

Show/hide an element in array with AngularJS and javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related