CODEWITHSUNDEEP
angularjsng-class
Kyle Pennell
Kyle Pennell

Reputation: 6097

ng-class within ng-repeat when object comes from other object/array

PLUNKER

I have an app that allows users to see info about live music and favorite the shows they like. Pushing the star button does this. They can then see this information on their own music calendar page.

stars

I'm able to save and update the favoriting data into my database just fine now. But I can't figure out how to style the star buttons (favoriting buttons) based on whether the user has favorited the item or not. They should change color/style if they are favorited or not.

There is data that comes from the music shows and data about the user (their personal info or favorites). These are separate bits of data. So when I bring the shows info in via ng-repeat, this is different than the info I have on whether the user has favorited that show.

The jist of the question, then, is how to style items/icons using ng-class within an ng-repeat when the info on whether those items have been favorited (true or false) comes from another object or array (can create either). Most of the examples with ng-repeat and ng-class are a alot simpler because the data on whether something is selected or not is within that same object.

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>

The pertinent part of the html is around <span class="pull-right star" ng-controller="StarredCtrl"> That's what creates the star icon.

Controller

I'll include the plunker so as not to have to jam this up.

The object where the user favorites are stored looks like this

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

using Angular.foreach I pared it down to this:

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

How can I access those true/false properties of $scope.loggedInUserFavorites on my template to style the star icon?

PLUNKER

Upvotes: 0

Views: 966

Answers (3)

Kyle Pennell
Kyle Pennell

Reputation: 6097

I basically used both @sanghas26 and @HeberLZ's to come up with:

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

So I changed the h2 to fa and then used the full and empty stars as the css classes. I really don't know why fillgreen and fillblue didn't work here. Will continue to investigate.

Anyway, it works. This took 6 weeks to figure out.

Upvotes: 0

sanghas26
sanghas26

Reputation: 151

Try this (where shows[$index].starred is your logic to check if the show has been favorited)

<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>

Upvotes: 1

HeberLZ
HeberLZ

Reputation: 14073

Actually this should work:

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

As scopes prototypically inherit from their parents, you do actually have access to both the show model from the ng-repeat scope, and loggedInUserFavorites from the StarredCtrl scope.

Cheers!

Upvotes: 2

Related Questions