Alright, thanks. Will try to figure that out. On Friday, September 19, 2014 4:58:08 PM UTC-6, Eric Eslinger wrote: > > 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] > <javascript:>> 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] <javascript:>. >> To post to this group, send email to [email protected] >> <javascript:>. >> 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.
