ng-style not working inside nested ng-repeat

Question

I've got the following markup:

              <li ng-repeat="month in months">
              <!-- NOTE THAT THIS IS WORKING IN ALL BROWSERS -->
                <div class="cm-month-grid" ng-style="{width:{{month.pos.width}}+'px', left:{{month.pos.left}}+'px'}">
                  <div class="cm-month-title" title="{{month.date.format('DD.MM.YY')}} {{month.pos | json}}">{{month.date.format('MMM.YY')}}</div>
                  <div class="cm-month-border"></div>
                </div>
              </li>

that runs fine, but this is not:

              <li ng-repeat="unit in units | filter: filter.text">
                <div class="cm-periods">
                <!-- BUT THIS IS NOT WORKING... WHY.... 
                  <div ng-repeat="period in unit.periods" class="cm-period" ng-style="{width:{{period.pos.width}}+'px', left:{{period.pos.left}}+'px'}" data-period="{{.}}}">
                    <span >{{period.start.format('DD.MM.YY')}}</span>
                    <div style="background: pink;" ng-style="{width:{{period.pos.width}}+'px', left:{{period.pos.left}}+'px'}">jalla</div>
                  </div>-->
                  <!-- WORKING IN CHROME ONLY -->
                  <div ng-repeat="period in unit.periods" class="cm-period" style="width:{{period.pos.width}}px; left:{{period.pos.left}}px;" data-period="{{.}}}">
                    <span>{{period.start.format('DD.MM.YY')}}</span>
                  </div>
                   <!-- -->
                </div>
              </li>

Full example could be seen here: http://plnkr.co/edit/aZsZEM?p=preview

I know there are issues with style and IE, that's why I'm using the ngStyle, but it does not update it style (try clicking on the zoom in the full example in IE)

Thanks for any help

Larsi

I don't think I can use ngClass as I'm using the inline style to position the elements. It would require lots of classes... — Larsi, Feb 03 '14 at 14:44

mainguy · Accepted Answer · 2014-02-03T15:26:42.593

9

You are using ng-style with double curly brackets. As far as I know that's not valid in an expression. Try this:

<div ng-repeat="period in unit.periods" class="cm-period" ng-style="{'width':period.pos.width+'px', 'left':period.pos.left+'px'}" data-period="{{.}}}">
     <span >{{period.start.format('DD.MM.YY')}}</span>
     <div style="background: pink;" ng-style="{'width':period.pos.width+'px', 'left':period.pos.left+'px'}">jalla</div>
     </div>
</div>

Hmm, still looks messy to me. But, HEY! it zooms! (in FF)

Uh, forgot: Forked Plunk

edited Feb 03 '14 at 15:26

answered Feb 03 '14 at 15:10

mainguy

8,283
2
31
40

Thanks, that solved the issue on IE. BTW, you say it looks a bit fuzzy, any suggestions on how you would implement this? It's my first angular app so I probably did a lot wrong. All feedback are very welcome. Maybe using a directive instead of ngStyle? – Larsi Feb 04 '14 at 10:52
2

What you are trying to do is called a GANTT Chart. There is a fine directive here http://ngmodules.org/modules/angular-gantt. Just look at the Demo. Out of performance reasons i would code this with an SVG library like this: http://d3js.org/ Just search for d3js and angular. You will find a lot of implementations. – mainguy Feb 04 '14 at 11:08

ng-style not working inside nested ng-repeat

1 Answers1