1

我正在使用带有 AngularJS 的 Foundations。我有一个案例，我试图使用ng-repeat.

<div class="four columns" ng-repeat="resultsObject in resultsObject">
    <div ng-bind-html-unsafe="resultsObject"></div>
</div>

这工作正常。但问题是列大小可能在 1-5 之间。而且我希望显示动态更新。因此，如果只有 2 列，它将调整为正确的列显示。

<div class="{{$rootScope.columnCount}} columns" ng-repeat="resultsObject in resultsObject">
    <div ng-bind-html-unsafe="resultsObject"></div>
</div>

当我尝试执行类似上述代码的操作时，{{$rootScope.columnCount}}不显示任何内容。（我已经验证它确实根据输入准确地存储了正确的列。）它在源中显示为<div class=" columns">而不是<div class="3 columns">.

这是使用角度变量和ng-repeat属性的问题吗？我{{$index}}在课堂上使用过——所以我知道它可以在类属性中打印出来。

4

2 回答 2

1

如果没有看到一些代码，我会假设列数等于，resultsObject.length所以你可以试试：

<div class="{{resultsObject.length}} columns" ...

这是一个简短的演示。查看每个 li 的类，你会看到计数。

http://plnkr.co/edit/fFRTjD5gse8tnJmDig2I?p=preview

最后，您可以尝试绑定到class="{{columnCount}} columns">... 我认为您不需要引用 $rootScope。

于 2013-05-06T18:44:45.170 回答
0

问题是变量重叠的问题。显然我曾columncount在我的应用程序的其他地方使用过。所以它一直被设置为空值。只需更改名称即可解决问题。

于 2013-05-06T20:06:42.347 回答