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

Raneeraney

Rather than inline style, have you tried using ng-class? – Cordite

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... – Raneeraney

Answer 1

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

Chandelle

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? – Raneeraney

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