无论如何要在 angularjs 模板中进行循环？

Question

我正在开发一个带有温泉 UI (angularjs) + cordova 的应用程序。所以我有一个包含评论的页面，每个评论都有一个按钮 "like"。当用户已经喜欢该页面时，我必须显示一个不同的按钮。然后我创建了一个名为 "active" 的 CSS class。但是为了我可以使用这个 class，我应该在 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"

好的，现在让我们尝试为已经 "liked"（激活 css class）显示不同的按钮，如果用户还没有 "liked"，则显示普通按钮。

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

所以有可能吗？如果没有，最好的方法是什么？

Answer 1

这绝对有可能：

在你的 HTML:

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

然后，向您的控制器添加一个 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;
    });
};

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

无论如何要在 angularjs 模板中进行循环？

Is there anyway to make a loop in angularjs template?

javascript

angularjs

cordova

onsen-ui