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

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

为什么不把你的硬编码风格放到 classes 中呢？现在它很常见了？

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

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

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

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

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

styling a div in angularjs based on conditions

angularjs

angularjs-directive