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

Question

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

inside ng-repeat, you can find the index of the item with the attribute $index. Tie this to a method to grab the specific show and see if the user has starred it? if they have, use a different ng-class for displaying the star — sanghas26
– sanghas26, Commented Aug 28, 2014 at 23:01
@sanghas26 So ng-class should call a function with $index? And then that function with see if the item is starred or not? — Kyle Pennell
– Kyle Pennell, Commented Sep 11, 2014 at 20:07
How do I access or return a CSS class from inside a controller? — Kyle Pennell
– Kyle Pennell, Commented Sep 11, 2014 at 20:47

HeberLZ · Accepted Answer · 2014-08-29 00:21:50Z

2

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!

answered Aug 29, 2014 at 0:21

HeberLZ

14.2k4 gold badges25 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kyle Pennell Over a year ago

Really appreciate you answering. I've tried this and versions of it but no dice so far.

sanghas26 · Accepted Answer · 2014-09-11 22:57:22Z

1

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>

answered Sep 11, 2014 at 22:57

sanghas26

1511 gold badge2 silver badges10 bronze badges

1 Comment

Kyle Pennell Over a year ago

Thanks for the suggestion. Wondering if something is loading too soon/late for this logic to apply. Stumped on this.

Kyle Pennell · Accepted Answer · 2014-09-23 20:50:00Z

0

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.

answered Sep 23, 2014 at 20:50

Kyle Pennell

6,1975 gold badges58 silver badges83 bronze badges

1 Comment

sanghas26 Over a year ago

Maybe this would work even better?: <h2 ng-click="toggleStarred(show)" ng-class="{fa: true, 'fa-star': loggedInUserFavorites[show.properties.id], 'fa-star-o': !loggedInUserFavorites[show.properties.id]}"></h2>

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related