0

I am putting a calendar of events together for a weekend event. I am trying to create a angular template for each day since each gets its own colors(css1 and css2). I was able to create one template that reads all events and returns Saturday and Sunday together as seen in the first plunker link below.

But when I try to make the template just return the Saturday events it did not work, plunker below. Sorry if it seems too much code in the plunker, just trying to show the need for the options tag to work with the template. Needless to say i'm new to Angular so any help would be appreciated.

working single template plunker: http://plnkr.co/edit/gaKFWTsACxwCg0i4JCiw?p=preview

plunker of Saturday template not working: http://plnkr.co/edit/A6f8ZUyXg9pdH6HzO2ET?p=preview

 <h1>Saturday</h1>
 <div class="target-stage stage-only" style="width:100%; border:none;" 
    ng-repeat="item in artists | filter: query | filter: {{day: artistDay, 
value:"Saturday"}, time: artistTime, stage: artistStage}">

      <table width="100%" cellspacing="0" border="0" cellpadding="0" 
style="border:none;">           
        <tr>
          <td class="venue-bar"><h3 style="font-size:16px;"><b>{{item.stage}}
</b></h3></td>
        </tr>
      </table>

      <table class="target-stage stage-only" border="0" cellspacing="0" 
cellpadding="0" style="border:none;" >  
      <tr>
        <td width="190" valign="top" class="ev-time">{{item.time}}</td>
        <td valign="top" class="ev-desc">
        <p class="ev-date">{{item.day}}, {{item.date}}, 2015</p>
        <strong>{{item.first_name}} {{item.last_name}},</strong> Author of 
<em>" {{item.work_title}}"</em><br />
        {{item.stage}}
        <span class="info-btn"><p class="selctor" rel={{item.rel}}><span 
class="addSchd"><a href="#"><b>+ MY SCHEDULE</b></a></span>
        <span class="premove hidd" rel="0"><a href="#">Remove</a></span></p>
</span></td>
      </tr>
    </table>
  </div>
roob
  • 85
  • 1
  • 1
  • 8

1 Answers1

0
ng-repeat="... value:"Saturday" ... "

You have double quotes in an HTML attributes surrounded by double quotes. That is obviously not valid HTML. Use single quotes:

ng-repeat="... value:'Saturday' ... "

Now once that is fixed, the filter value is supposed to be a JavaScript object. And you got

{{day: artistDay, value:'Saturday'}, time: artistTime, stage: artistStage}

This is not a valid object. Here's a valid object:

{day: 'Saturday', time: artistTime, stage: artistStage}

EDIT:

OK. Here's a plunkr: http://plnkr.co/edit/A6f8ZUyXg9pdH6HzO2ET?p=preview

And here are the main points.

  1. you want to show one day: the one selected in the combo box. So iterating over the days and trying to filter the list to only keep the selected day is useless. You already have the unique day to print: the one selected in the combo box. So all you need is

    <h1>{{ artistDay }}</h1>

  2. the filter argument, as already said above, must be an object. You want to keep the elements whose day property matches with the value contained in artistDay, so the filter should simply be

    {day: artistDay, time: artistTime, stage: artistStage}

    You got the syntax right for the two other properties, BTW. Why would it be different for day?

JB Nizet
  • 678,734
  • 91
  • 1,224
  • 1,255
  • I'm sorry I was not clear with the wording of my question thats my bad, the template needs to be dynamically filled by the Options list that filters by day of week (artistDay). I was trying to implement the suggestions from this post: http://stackoverflow.com/questions/14733136/angular-js-ng-repeat-filter-by-single-field I have updated the plunker to show better what I need: one template for saturday, one for sunday, as each get their own colors etc – roob Mar 08 '15 at 19:25
  • I don't understand what you want to do. Explain me as if I was an end user: "when I select this in that dropdown, I want that to happen". – JB Nizet Mar 08 '15 at 20:05
  • When one selects 'Saturday' or 'Sunday' from the drop menu that says 'Both Days', the calendar will show the heading, either Sat or Sun, followed by only the respective events. In the plunker you will see ng-model="artistDay" on the options list for that purpose, ie to filter Saturday or Sunday events, or both days. Take a look at this plunker: http://plnkr.co/edit/gaKFWTsACxwCg0i4JCiw?p=preview The reason I need to redo this is each day gets different colors, hence the need to have two angular templates, unless there is a better way of doing it. please let me know if I can further clarify. – roob Mar 09 '15 at 21:18
  • I appreciate your follow through, however there is still a disconnect. This is still working on a single template (within the view), and I already had that working. I need two templates so i can apply different css. Saturday text get blue colors while Sunday gets green, for example. Unless css can be applied dynamically then we're still not there. btw the plunker link you posted is the one i posted. Another issue to keep in mind is when 'Both Days' option is selected the headings right now return '!!', it should return all events with both 'Sat' and 'Sun' headings. Plunker is updated. – roob Mar 10 '15 at 03:04
  • this is the current Schedule of events which I am trying to change to Angular you'll see what I am trying to do: http://events.latimes.com/festivalofbooks/the-festival/schedule/ – roob Mar 10 '15 at 03:07
  • *Unless css can be applied dynamically then we're still not there* that's what ng-style and ng-class are for. – JB Nizet Mar 10 '15 at 06:46