当对象来自其他对象/数组时，ng-repeat中的ng-class

Question

PLUNKER

我有一个应用程序，允许用户查看有关现场音乐的信息，并喜欢他们喜欢的节目。按下星形按钮就可以了。然后，他们可以在自己的音乐日历页面上查看此信息。

我现在能够将收藏数据保存并更新到我的数据库中。但我无法根据用户是否收藏该项目来弄清楚如何设置星形按钮（收藏按钮）的样式。如果它们受到欢迎，它们应该改变颜色/样式。

有来自音乐节目的数据和有关用户的数据（他们的个人信息或收藏夹）。这些是单独的数据位。因此，当我通过ng-repeat显示节目信息时，这与我对用户是否喜欢该节目的信息不同。

问题的主旨是如何在ng-repeat 中使用ng-class设置项目/图标的样式关于这些项目是否被收藏（真或假）的信息来来自另一个对象或数组（可以创建）。大多数使用ng-repeat和ng-class的例子都比较简单，因为关于某些东西是否被选中的数据都在同一个对象中。

HTML

  <div class="list-group">
    <div class="nav nav-stacked list-group-item" id="sidebar" ng-repeat=
    "show in shows[0]">
      <div>
        <div class="col-md-3 text-center">
          <h2>{{show.properties.price}}</h2>

          <p id="tagtext">{{show.properties.tags}}</p>
        </div>

        <div class="col-md-6">
          <h4 class="list-group-item-heading">{{show.properties.artist}}</h4>

          <p class="list-group-item-text">{{show.properties.venue}}</p>
        </div>
      </div>

      <div class="media col-md-3">
        <h2 class="fa fa-star-o" ng-click="toggleStarred(show)" ng-class="I don't know">
        </h2>
      </div>
    </div>
  </div>
</body>

html的相关部分是<span class="pull-right star" ng-controller="StarredCtrl">，这就是创建星形图标的原因。

控制器

我会包括吸管，以免堵塞它。

存储用户收藏夹的对象如下所示

$scope.loggedInUserFavorites = Object { $$conf: Object, $id: "favorites", $priority: null, show0: true, show1: false, show3: true, show5: false }

使用Angular.foreach我把它简化为：

Object { 0: false, 1: false, 3: true, 5: false }

如何在我的模板上访问$scope.loggedInUserFavorites的真/假属性来设置星形图标的样式？

PLUNKER

Answer 1

实际上这应该有效：

<h2 class="fa fa-star-o" ng-click="toggleStarred(show)" ng-class="{fillgreen:loggedInUserFavorites[show.properties.id]}">

由于范围原型继承自父母，您实际上可以访问ng-repeat范围中的show model和来自StarredCtrl范围的loggedInUserFavorites。

干杯！

Answer 2

试试这个（显示[$ index] .starred是你检查节目是否被收藏的逻辑）

<div class="media col-md-3">
    <h2 class="fa fa-star-o" ng-click="toggleStarred(show)" ng-class="{starred: shows[$index].starred, no-star: !shows[$index].starred}">
    </h2>
</div>

Answer 3

我基本上使用了@ sanghas26和@ HeberLZ来提出：

<h2 class="fa" ng-click="toggleStarred(show)" ng-class="{'fa-star': loggedInUserFavorites[show.properties.id], 'fa-star-o': !loggedInUserFavorites[show.properties.id]}"></h2>

所以我将h2更改为fa，然后使用完整和空星作为css类。我真的不知道为什么fillgreen和fillblue在这里工作。将继续调查。

无论如何，它有效。这需要6个星期才能搞清楚。