Показать / скрыть элемент в массиве с AngularJS и JavaScript

Question

Я хочу отобразить дополнительную информацию о щелчке элемента в ng-repeat и скрыть это при отпускании мыши от этого элемента.

В приведенном ниже фрагменте кода, когда пользователь нажимает на другой элемент, это открывает дополнительную информацию и для первого элемента.

Фрагмент кода

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

Я хочу показывать дополнительную информацию только для одного элемента за раз.

Пожалуйста, помогите мне исправить мой фрагмент кода

Answer 1

Проблема в том, что this.showDelete элементы управления отображают все строки элементов одновременно.

Исправленный фрагмент кода

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>