*PLUNKER* <http://plnkr.co/edit/BApmfwaIU3XQSdLK9NSd?p=preview>
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.
[image: 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. I needed to have
one spot in the database for the shows and one for the user (and their
favorites).
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 (e.g. item.active or item.style).
*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?
What I've tried:
1. ng-class="{fillgreen:loggedInUserFavorites[show.properties.id]}">
2. ng-class="{fillgreen: userStars[$index], fillred: !userStars[$index]}"
>
3. ng-class="getStarClass($index)" with
$scope.getStarClass = function(index) {
if ($scope.userStars[index] == true){
console.log(index + ' is starred');
return "fillblue";
}
else {
console.log(index + ' is not starred');
return "fillred";
}
//if index is in $scope.userStars, change css class
}
Any tips or ideas?
*PLUNKER* <http://plnkr.co/edit/BApmfwaIU3XQSdLK9NSd?p=preview>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
