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

时间:2014-02-03 14:36:28

标签: angularjs angularjs-ng-repeat ng-style

我有以下标记:

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

运行良好,但事实并非如此:

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

这里可以看到完整的例子:http://plnkr.co/edit/aZsZEM?p=preview

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

感谢您的帮助

Larsi

1 个答案:

答案 0 :(得分:9)

您正在使用带有双花括号的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>
嗯,我看起来仍然很乱。但是,嘿!它缩放! (在FF中)

呃,忘了:Forked Plunk