javascript - 将类添加到添加到数组中的最新项目以表明它们是新的

Question

我正在使用 AngularJs 制作一个聊天应用程序，并且我有一个功能可以添加带有虚拟数据的新对话(用于测试)。当有新的对话时，它会将“new”类添加到元素中。但是，当我添加另一个新对话时，它会将类添加到最新元素，然后从添加的其他新元素中删除它。

当有一个新的对话时，它应该将"new"类添加到元素中(不是在数组中，而是在 HTML 中)，当您添加另一个新对话时，它也必须向该元素添加一个新类，但是将另一个新类保留在另一个元素上。

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

这是我的代码:

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

您想继续这个新类(class)多久？也就是说，如果我插入两行、三行或四行，它们都是红色的，还是......？您发布的 fiddle 仅在 $scope.lastInsertedId 中保留一个项目，因此，如果您想要多个项目，只需保留一组项目即可。

在 this modification of the fiddle我更改了您的标记:

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

致:

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

在您的 Controller 中，我将 $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
   };
}