動態欄類使用AngularJS

我使用的基礎與AngularJS Zurb基金會列。我有一個案例，我試圖使用ng-repeat來顯示列中的內容。動態欄類使用AngularJS

<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}} - 所以我知道它可以在class屬性中打印出來。

來源

2013-05-06 EnigmaRM

沒有看到一些代碼，我將承擔列數等於resultsObject.length所以你可以嘗試：

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

這裏是一個簡短的演示。檢查出每類裏，你就會看數量。

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

最後可能你只是嘗試綁定到class="{{columnCount}} columns">...我不認爲你需要參考$ rootScope。

來源

2013-05-06 18:44:45 lucuma

不錯的想法。但給了我相同的結果。 – EnigmaRM 2013-05-06 18:55:57

你可以發佈一個演示該問題的plunkr嗎？ – lucuma 2013-05-06 18:56:33

我會看看我能做些什麼。 – EnigmaRM 2013-05-06 18:57:50

的問題是與變量重疊的問題。顯然我在我的應用程序的其他地方使用了columncount。所以它只是一直回到空值。只需更改名稱即可解決問題。

來源

2013-05-06 20:06:42 EnigmaRM

動態欄類使用AngularJS

回答

相關問題