Question

我正在与AngularJs建立一个聊天应用程序，我有一个功能来添加一个带有虚拟数据的新对话（用于测试）。当有新的对话时，它会向元素添加“new”类。但是当我添加另一个新对话时，它会将该类添加到最新元素中，并从已添加的其他新元素中删除它。

当有新的对话时，它应该将“new”类添加到元素中（不在数组中但在HTML中），当你添加另一个新对话时，它必须向该元素添加一个新类，但是将另一个新类保留在另一个元素上。

我找到了Jsfiddle并使用了它。问题是，当我添加另一个新会话时，它会删除另一个新会话的“新”类。

这是我的代码：

conversationList.newest = "";
conversationList.addConversation = function() {
    var conversation = {
        ConversationID: conversationList.newId(),
        Person   : {
            name  : "Bobi Ristov",
            email : "bobby.ristov@socialdeal.nl",
            time  : Date.now(),
            image : "http://lorempixel.com/276/276/people/",
            phone : "06 - 12345678"
        },
        Messages : []
    };
    conversationList.newest = conversation.ConversationID;
    conversationList.conversations.push(conversation);

};

数组样本：

conversationList.conversations = [
     {
        ConversationID: 1,
        Person   : {
            name  : "Bobi Ristov",
            email : "bobby.ristov@socialdeal.nl",
            image : "/img/bobi.png",
            phone : "06 - 12345678"
        },
        Messages : [ {
                         text         : "Ik heb een vraag",
                         messageClass : "user-message",
                         time         : 1429257762800
                     },
                     {
                         text         : "Wat is je vraag?",
                         messageClass : "admin-message pull-right",
                         time         : 1429257942900
                     },
                     {
                         text         : "Hoe kun je een deal kopen?",
                         messageClass : "user-message",
                         time         : 1429257763000
                     },
                     {
                         text         : "Door middel op de 'Koop nu' knop te drukken",
                         messageClass : "admin-message pull-right",
                         time         : 1429259943100
                     } ]
    },
     {
        ConversationID: 2,
        Person   : {
            name  : "Rene Jaspers",
            email : "rene@socialdeal.nl",
            image : "/img/rene.png",
            phone : "06 - 87654321"
        }
        ,
        Messages : [ {
                         text         : "This is a second user message",
                         messageClass : "user-message",
                         time         : 1429257762500
                     },
                     {
                         text         : "This is a second admin message",
                         messageClass : "admin-message pull-right",
                         time         : 1429258942900
                     } ]
    },
     {
        ConversationID: 3,
        Person   : {
            name  : "Jafeth van Gorp",
            email : "jafeth@socialdeal.nl",
            image : "/img/jafeth.png",
            phone : "06 - 12348765"
        }
        ,
        Messages : [ {
                         text         : "This is a third user message",
                         messageClass : "user-message",
                         time         : 1429257763000
                     },
                     {
                         text         : "This is a third admin message",
                         messageClass : "admin-message pull-right",
                         time         : 1429257944000
                     } ]
    },
     {
        ConversationID: 4,
        Person   : {
            name  : "Peter Covers",
            email : "peter@socialdeal.nl",
            image : "/img/peter.png",
            phone : "06 - 87654321"
        }
        ,
        Messages : [ {
                         text         : "This is a fourth user message",
                         messageClass : "user-message",
                         time         : 1429257763000
                     },
                     {
                         text         : "This is a fourth admin message",
                         messageClass : "admin-message pull-right",
                         time         : 14292579444000
                     } ]
    }
];

任何帮助都将不胜感激。

Answer 1

你想要保持这个新班多久？也就是说，如果我插入两行，三行或四行，它们都是红色的，还是......？你发布的小提琴只保留$scope.lastInsertedId中的一个项目，所以，如果你想要多个项目，只需保留一系列项目。

在this modification of the fiddle我改变了你的标记：

<span ng-class='{lastinserted: item.ID==lastInsertedId}'>

要：

<span ng-class='getClass(item)'>

在您的控制器中，我将$scope.lastInsertedId = ""更改为$scope.newItems = []

现在只需将新项ID插入newItems，然后在$scope.getClass()中检查您的项目是否在该数组中：

$scope.newItems= [];
$scope.addItem = function(){
   var dd = new Date($scope.itemDate);
   var item = {"ID":$scope.items.length+1, "heading":$scope.itemName, "date":dd.getTime()};
   $scope.items.push(item);
   $scope.newItems.push(item.ID);
}

$scope.getClass = function(item) {
   var isNew = false;

   $scope.newItems.forEach(function(id) {
       if (id === item.ID) {
           isNew = true;
       }
   });
   return {
       lastinserted: isNew
   };
}

将类添加到添加到数组中的最新项，以指示它们是新的

1 个答案: