Css Angularjs消息框仅显示一个文本框，与所选用户无关_Css_Angularjs

Css Angularjs消息框仅显示一个文本框，与所选用户无关

css angularjs

Css Angularjs消息框仅显示一个文本框，与所选用户无关,css,angularjs,Css,Angularjs,我正在尝试使用angularjs构建一个多消息聊天盒。在Angularjs数组中，我有四个用户这是我的问题：应用程序只显示一个弹出框，与用户点击无关，如屏幕截图所示以下是我试图实现的目标我想要的是facebook多聊天信息框之类的东西。也就是说，如果我选择多个用户，两个用户，如果选择三个用户，我应该看到两个对应于这些用户的弹出消息框我应该看到三个用户弹出框等等这是到目前为止的代码 <!doctype html> <html ng-app="myapp">

我正在尝试使用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>

以下是我如何在您的解决方案中添加隐藏/取消隐藏消息框的方法

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


.侧边栏{
宽度：20%；
位置：固定；
身高：100%；
右：0px；
顶部：0px；
填充顶部：50px；
垫底：10px；
边框：1px实心#b2b2b2；
文本对齐：底部对齐；
}
.主要地区{
位置：固定；
宽度：80%；
底部：0%
}
.联络电话亭{
位置：相对位置；
底部：-5px；
宽度：250px；
//高度：自动；
背景：黑色；
颜色：红色；
边界半径：5px 5px 0px 0px；
底部：0px；
//右：270px；
显示：内联块；
}
var-app=angular.module（'myapp'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.arr=[{
名称：“user1”，
popStatus:错误
},
{
名称：“user2”，
popStatus:错误
},
{
名称：“user3”，
popStatus:错误
},
{
名称：“user4”，
popStatus:错误
}
];
//隐藏消息框
$scope.hideUnhideIt=函数（id）{
$scope.hideUnhideId=（$scope.hideUnhideId==id）？-1:id；
}
//流行歌手
$scope.popIt=函数（id）{
if（$scope.arr[id].popStatus==true）{
$scope.arr[id].popStatus=false
}否则{
$scope.arr[id].popStatus=true；
}
}
});


{{ret.name}}




接近
隐藏/取消隐藏


用户名：{{ret.name}

消息………


消息………


消息………


消息………


消息………


消息………

您必须对数组中的每个项目保持可见性得分；加上做了一些css的东西，使聊天框不重叠；在整个页面中打开片段，以便您可以看到相对定位和固定定位的效果

更新：根据Nancy的反馈，隐藏/取消隐藏按钮现在也在每个单独的聊天窗口中切换

var-app=angular.module（'myapp'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.arr=[
{name:“user1”，popStatus:false，hideBox:false}，
{name:“user2”，popStatus:false，hideBox:false}，
{name:“user3”，popStatus:false，hideBox:false}，
{name:“user4”，popStatus:false，hideBox:false}
];
//流行歌手
$scope.popIt=函数（id）{
if（$scope.arr[id].popStatus==true）{
$scope.arr[id].popStatus=false
}否则{
$scope.arr[id].popStatus=true；
}
}
//隐藏消息框
$scope.hideUnhideIt=函数（id）{
（$scope.arr[id].hideBox==true）？$scope.arr[id].hideBox=false:$scope.arr[id].hideBox=true；
}
});
。侧栏{
宽度：20%；
位置：固定；
身高：100%；
右：0px；
顶部：0px；
填充顶部：50px；
垫底：10px；
边框：1px实心#b2b2b2；
文本对齐：底部对齐；
}
.主要地区{
位置：固定；
宽度：80%；
底部：0%
}
.联络电话亭{
位置：相对位置；
底部：-5px；
宽度：250px；
//高度：自动；
背景：黑色；
颜色：红色；
边界半径：5px 5px 0px 0px；
底部：0px；
//右：270px；
显示：内联块；
}



{{ret.name}





接近
隐藏/取消隐藏


用户名：{{ret.name}

消息………


消息………


消息………


消息………


消息………


消息………

您似乎在使用单个范围变量--popId
——来存储可见项的$index。如果你有ng if=“popId==$index”，那么你将只有一个可见项。你能提供html代码吗？所有te代码都有html和AngularJ谢谢Akber Iqbal爵士，你的解决方案工作得很好。上帝保佑你。。。还有一件事，虽然它不在我的帖子里，但却和我有点接近。我的隐藏/取消隐藏按钮仅隐藏或最小化一个messagebox。如果我试图隐藏另一个弹出框，它将打开已隐藏的第一个弹出框。隐藏/取消隐藏bitton的id似乎有冲突。请你看看我的文章的更新部分，看看你是否可以做些什么来进一步帮助我。感谢您迄今为止的精彩贡献。希望能尽快收到你的来信。嗨@NancyMooree，希望你做得很好-请检查更新的代码，如果有什么，请告诉我，祝你有愉快的一天谢谢Akber Iqbal先生。你是最好的，阿克伯·伊克巴尔爵士。我有你最后的一个愿望。请你看一下这里的代码，看看有没有什么可以写的。谢谢你迄今为止的贡献。这是问题的stackoverflow链接
<!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>