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

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