Question

.left {
    float: left;
}

.right {
     float: right;
}

<div>
<div ng-repeat="x in myMessages">
    <div style="width:70%;" ng-class="{left: {{x.sender_username}} == '<?php echo $_SESSION['username']; ?>', right: {{x.sender_username}} != '<?php echo $_SESSION['username']; ?>'}">
    

        <strong>@{{x.sender_username}}</strong>
        <p>{{x.messages}}</p>


</div>
</div>
</div>

我正在使用angularjs构建聊天应用程序，登录后，在会话中设置了用户的用户名。在与其他用户聊天时，我希望帐户所有者的聊天向左浮动，而其他人在向右浮动，这是我在网上搜索后想到的，但不起作用。我很高兴看到有人对此提供帮助。预先感谢。

Answer 1

为什么现在不把硬编码的样式放到类中了？

.left {
  float: left;
  width:70%;
}

.right {
  float: right;
  width:70%;
}

然后，引用类名称并停止渲染。 ng-class需要一个表达式：

<div ng-class="{ 
  'left': x.sender_username == '<?php echo $_SESSION['username']; ?>', 
  'right': x.sender_username != '<?php echo $_SESSION['username']; ?>'
}">

根据条件在angularjs中设置div的样式

1 个答案: