This looks to me like it is a good case for using a custom directive. You should have something like a model that defines show.band, .venue, .starred, etc. Then you can do ng-repeat="show in shows" show="show", and lay everything out appropriately.
Put an ng-click on the star to call a function that toggles .starred and also generates an $http call to persist that information to your backing store. e On Fri, Sep 19, 2014 at 3:09 PM, Kyle Pennell <[email protected]> wrote: > *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. > -- 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.
