CODEWITHSUNDEEP
javascriptjqueryangularjs
Ewald Bos
Ewald Bos

Reputation: 1770

Show/hide an element in array with AngularJS and javascript

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

Upvotes: 0

Views: 205

Answers (1)

nkshio
nkshio

Reputation: 1080

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>

Upvotes: 1

Related Questions