Angularjs Shows only one Message box instead of many based on users
selected.
Am trying to build a multi-messaging chatbox using angularjs. Within the
Angularjs array, I have four users.
Here is my issue:
The application shows only just one popup box irrespective of the user
clicked.
*Here is what am trying to achieve:*
what I want is something like facebook multi-chat message box. That is if
I select multiple user,
Eg. Two users, am supposed to be seeing two popup messagebox that
corresponds to those users, if select three users
am supposed to being seeing three users popup box and so on...
*Here is the code so far*
<!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>
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
