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