Question

以下代码来自Angular应用程序中的聊天界面。用户将通过单击用户气泡来选择他们希望发送消息的用户，这些用户气泡会将这些用户添加到阵列 selectedChatUsers

列出用户。突出显示当前选择的那些。

<div ng-repeat="user in PlayerController.chatUsers | orderBy:['type','name']"
     class="chat-recipient"
     ng-class="{'selected-recipient' : PlayerController.selectedChatUsers.indexOf(user) >= 0 }"
     ng-click="PlayerController.selectRecipient(user)">
         <div class="chat-recipient-name" ng-bind="user.name"></div>
         <div class="chat-recipient-icon"></div>
</div>

该应用程序的另一个功能是能够从已发送的消息中单击聊天气泡，并使用＆＃34;到＆＃34;来填充 selectedChatUsers 数组。 property，此消息发送到的用户数组。

此功能有效，但应该显示应该显示这些用户的ng-class指令不起作用。

function chatReply(message){

    /* one attempt was to try and manipulate the array rather than copy the information directly.  This attempt had no more success. I'm including it here just to show that it was tried */

    /****
    self.selectedChatUsers.length = 0;

       angular.forEach(message.to, function(recipient){
           self.selectedChatUsers.push(recipient);
       });
    ****/

    /* Also tried wrapping the whole thing in $timeout and $scope.$apply, this also doesn't update the ng-class in the view */

      $timeout(function() {
          $scope.$apply(function(){
               self.selectedChatUsers = angular.copy(message.to);
           });
       });  

 }

有关如何在更改selectedChatUsers时更新视图中的ng-class的建议？

Answer 1

class和ng-class不能一起使用，始终应用class：

class="chat-recipient"
ng-class="{'selected-recipient' :  condition }"

删除课程并将其更改为：

 ng-class="condition == true ? 'chat-recipient selected-recipient' : 'chat-recipient'"

当数组被更改时，ng-class不会在ng-repeat内部更新

1 个答案: