个人中心
gpt4 book ai didi

css - Angularjs 消息框仅显示一个文本框，与选择的用户无关

转载 作者：太空宇宙 更新时间：2023-11-04 06:28:53 25 4
gpt4 key购买 nike

我正在尝试使用 angularjs 构建一个多消息聊天框。在 Angularjs 数组中，我有四个用户。

这是我的问题:

应用程序只显示一个弹出框，无论用户点击了什么，如屏幕截图所示 screenshot

这是我要实现的目标

我想要的是类似 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 爵士，您的解决方案运行良好。还有一件事与我接壤，尽管它不在我的职位范围内。我的隐藏/取消隐藏按钮仅隐藏或最小化一个消息框。 如果我尝试隐藏另一个弹出框，它将打开第一个已经隐藏的弹出框。

根据代码，隐藏/取消隐藏按钮 的 id 似乎有冲突下面

//hideUnhide message box
 $scope.hideUnhideIt = function(id){
          $scope.hideUnhideId = ($scope.hideUnhideId==id)?-1:id;
        }

screenshot

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

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

最佳答案

您必须对数组中的每个元素保持可见性分数；加上一些 CSS 的东西，这样聊天框就不会相互重叠；全页打开snippet，可以看到相对定位和固定定位的效果；

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

var app = angular.module('myapp', []);

app.controller('MainCtrl', function($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    }
  ];

  //pop div
  $scope.popIt = function(id) {
    if ($scope.arr[id].popStatus == true) {
      $scope.arr[id].popStatus = false
    } else {
      $scope.arr[id].popStatus = true;
    }
  }

  //hideUnhide message box
  $scope.hideUnhideIt = function(id) {
    ($scope.arr[id].hideBox == true) ? $scope.arr[id].hideBox = false: $scope.arr[id].hideBox = true;
  }

});
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.min.js"></script>

<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}}
          <!--           hide:{{ret.hideBox}}          -->
          <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="!ret.hideBox" 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>

关于css - Angularjs 消息框仅显示一个文本框，与选择的用户无关，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54856541/

25 4 0
文章推荐： html - 搜索栏图标向下移动？
文章推荐： java 在类周围添加括号，同时存储对按钮的引用
文章推荐： java - 如何在 Web ui 中更新使用服务帐户 api 上传的 Google Drive 文档？
文章推荐： java - 使用 EclipseLink MOXy 和 JAXB 给定另一个元素的值的 XPath
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com