Question

我试图在ng-repeat中使用ng-class动态地应用类，但是类名称（规则）在类名应用于html时不会生效。这是代码：

The controller:

controller('MessagesCtrl', ['MessageService', '$routeParams', 'socket', function (MessageService, $routeParams, socket) {
  var self = this
  self.messages = [
    {msg: 'First messaging service', username: 'Jane Doe', dpurl: 'mode.jpg', from: 'me'},
   {msg: 'another messaging service', username: 'John Doe', dpurl: 'model2.jpg', from: 'you'},
   {msg: ' messaging', username: 'John Doe', dpurl: 'model2.jpg', from: 'me'}
  ]

}])

html：

  <div class="chatcontainer" >
      <div ng-repeat="message in msgCtrl.messages" class="d-flex msgcontainer" ng-class="message.from?'me':'you'"><span class="badge badge-primary mr-auto msg">{{message.msg}}</span></div>

Answer 1

试试这个，

ng-class={'me':message.from, 'you':!message.from}

Answer 2

使用 ng-class =“（message.from）？'我'：'你'”

或者

纳克级= “message.from”

OR

ng-class = {'me':( message.from ==='me'），'you':( message.from！=='me'）}

Answer 3

我尝试了同样的，希望这会对你有所帮助。

<div ng-repeat="message in messages" class="d-flex msgcontainer" ng-class="{'me':message.from==='me', 'you':message.from==='you'}">
<span class="badge badge-primary msg" ng-class="{'mr-auto':message.from==='me', 'mr-auto1':message.from==='you'}">{{message.msg}}</span>

和使用的类，

.me {
    color: red;
}
.you {
    color: blue;
}
.mr-auto {
    font-size : 14px;
}
.mr-auto1 {
    font-size : 20px;
}

Answer 4

只需检查值，因为您的对象没有布尔值。

<div class="chatcontainer" >
      <div ng-repeat="message in msgCtrl.messages" class="d-flex msgcontainer" ng-class="message.from=='me' ?'me':'you'"><span class="badge badge-primary mr-auto msg">{{message.msg}}</span>
</div

Many-ways-to-use-ng-class

Answer 5

实际上这是我自己的逻辑错误，上面提到的所有语法都可以在我将逻辑重写为： {{message.msg}}

angulajs ng-class不能正常工作

5 个答案: