ng-style在嵌套的ng-repeat中不起作用

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

这里可以看到完整的例子: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)

我知道样式和IE有问题,这就是为什么我使用ngStyle,但它没有更新它的样式(尝试点击IE中完整示例中的缩放)

Thanks for any help

谢谢你的帮助

Larsi

1 个解决方案

#1

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

您正在使用带有双花括号的ng-style。据我所知,这在表达式中无效。尝试这个:

<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)

嗯,对我来说仍然看起来很乱。但是,嘿!它缩放! (在FF中)

Uh, forgot: Forked Plunk

呃,忘记了:叉子

#1