javascript - 反正有没有在angularjs模板中循环？

Question

我正在使用 onsen UI (angularjs) + cordova 开发一个应用程序。所以我有一个评论页面，每个评论都有一个“喜欢”按钮。当用户已经喜欢该页面时，我必须显示一个不同的按钮。然后我创建了一个名为“active”的 CSS 类。但是为了我可以使用这个类，我应该在 Angular 表达式中创建一个循环，因为我从后端返回一个 javascript 对象，每个评论都有用户交互。示例:

该页面有 3 条评论:id 1、id 2 和 id 3用户喜欢评论 1 和 3。返回的对象是:[对象][0] id => 1,[对象][1] id => 3

然后我用 angularjs 循环显示评论，如下所示:

 ng-repeat="comment in comments | limitTo: 6"

好的，现在让我们尝试为已经“喜欢”(使用事件的 css 类)显示不同的按钮，如果用户还没有“喜欢”则显示普通按钮。

<button class="button btnice {{ event.event_id in interactions ? 'active' : 'normal'}}">

那有可能吗？如果不是，最好的方法是什么？

Answer 1

这绝对有可能:

在您的 HTML 中:

<button class="button btnice" ng-class="isLiked(commentId) ? 'active' : 'normal'">

然后，向您的 Controller 添加一个isLiked 函数:

var likedComments = [{interaction_id: "2", value: "1", comment_id: 1}, {...}];

$scope.isLiked = function(commentId){
    return likedComments.some(function(interaction){
        return interaction.comment_id === commentId;
    });
};

这应该可以解决问题。如果 likedComments 对象数组包含一个或多个具有 comment_id === commentId 的对象，则返回 true。