Я пытаюсь построить чат с несколькими сообщениями, используя angularjs.В массиве Angularjs у меня четыре пользователя.
Вот моя проблема:
Приложение отображает только одно всплывающее окно, независимо от того, какой пользователь нажал, как видно.на скриншоте 
Вот то, что я пытаюсь достичь
, что я хочу, это что-то вроде окна мульти-чата в Facebook.То есть, если я выберу несколько пользователей, например.Два пользователя, якобы должны видеть два всплывающих окна сообщений, соответствующих этим пользователям, если выбрать трех пользователей, которые должны видеть всплывающее окно трех пользователей и так далее ...
Вот код такдалеко
<!doctype html>
<html ng-app="myapp">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.min.js"></script>
<script>
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
$scope.arr= [
{name:"user1"},
{name:"user2"},
{name:"user3"},
{name:"user4"}
];
//pop div
$scope.popIt = function(id){
$scope.popId = ($scope.popId==id)?-1:id;
}
//hide/unhide div partly working
$scope.IsVisible = false;
$scope.ShowHide = function(id){
$scope.IsVisible = ($scope.IsVisible = true)?-1:id;
}
});
</script>
<style>
.sidebar {
width: 250px;
position: fixed;
height: 100%;
right: 0px;
top: 0px;
padding-top: 200px;
padding-bottom: 10px;
border: 1px solid #b2b2b2;
text-align:bottom;
}
.contact_box{
position:fixed;
bottom:-5px;
width:250px;
// height:100px;
background:black;
color:white;
border-radius:5px 5px 0px 0px;
bottom: 0px;
right: 270px;
display: inline-block;
}
</style>
</head>
<body>
<div class="sidebar" ng-app="myapp" ng-controller="MainCtrl">
<ul>
<li ng-repeat='ret in arr track by $index'>
<div ng-click="popIt($index)" >
{{ret.name}}</div>
<div ng-if="popId==$index" class="contact_box">
<button style="float:right" ng-click="popIt($index)">Close</button>
<button style="float:left" ng-click="ShowHide()">hide/unhide</button>
<br>
<div style="height:100px;" ng-hide="IsVisible">
<b>Username:</b> {{ret.name}}
<br>Message .........<br>
<br>Message .........<br>
<br>Message .........<br>
<br>Message .........<br>
<br>Message .........<br>
<br>Message .........<br>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
Обновлен раздел:
Спасибо, сэр Akber Iqbal , ваше решение работает отлично.Еще одна вещь, которая граничит со мной, хотя это из моего поста.Моя кнопка скрытия / отображения скрывает или минимизирует только одно окно сообщения.Если я попытаюсь скрыть другое всплывающее окно, оно откроет первое уже всплывающее окно.
кажется, что идентификатор кнопки скрыть / показать конфликтует, как показано ниже
//hideUnhide message box
$scope.hideUnhideIt = function(id){
$scope.hideUnhideId = ($scope.hideUnhideId==id)?-1:id;
}
Вот как я добавил окно скрытия / отображения в вашем решении
<!doctype html>
<html ng-app="myapp">
<head>
<title></title>
<style>
.sidebar {
width: 20%;
position: fixed;
height: 100%;
right: 0px;
top: 0px;
padding-top: 50px;
padding-bottom: 10px;
border: 1px solid #b2b2b2;
text-align: bottom;
}
.mainArea {
position: fixed;
width: 80%;
bottom: 0%
}
.contact_box {
position: relative;
bottom: -5px;
width: 250px;
// height:auto;
background: black;
color: red;
border-radius: 5px 5px 0px 0px;
bottom: 0px;
//right: 270px;
display: inline-block;
}
</style>
<script src="jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.min.js"></script>
<script>
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
$scope.arr = [{
name: "user1",
popStatus: false
},
{
name: "user2",
popStatus: false
},
{
name: "user3",
popStatus: false
},
{
name: "user4",
popStatus: false
}
];
//hideUnhide message box
$scope.hideUnhideIt = function(id){
$scope.hideUnhideId = ($scope.hideUnhideId==id)?-1:id;
}
//pop div
$scope.popIt = function(id) {
if ($scope.arr[id].popStatus == true) {
$scope.arr[id].popStatus = false
} else {
$scope.arr[id].popStatus = true;
}
}
});
</script>
</head>
<body>
<div ng-app="myapp" ng-controller="MainCtrl">
<div class="sidebar">
<ul>
<li ng-repeat='ret in arr track by $index'>
<div ng-click="popIt($index)">
{{ret.name}} <!-- visible:{{ret.popStatus}} --><br><br>
</div>
</li>
</ul>
</div>
<div class='mainArea'>
<ng-controller ng-repeat='ret in arr track by $index'>
<div ng-if="ret.popStatus == true" class="contact_box">
<button style="float:right" ng-click="popIt($index)">Close</button>
<button style="float:left" ng-click="hideUnhideIt($parent.$index)">hide/unhide</button>
<br>
<div ng-if="hideUnhideId!=$index" style="height:auto;">
<b>Username:</b> {{ret.name}}
<br>Message .........<br>
<br>Message .........<br>
<br>Message .........<br>
<br>Message .........<br>
<br>Message .........<br>
<br>Message .........<br>
</div>
</div>
</ng-controller>
</div>
</div>
</body>
</html>