雙ng重複平展嵌套對象

我有一個使用情況下，我已經解決了直到現在與ng-repeat-start。目前，它看起來像這樣：雙ng重複平展嵌套對象

控制器

$scope.providers = [ 
    'Site Hosting', 
    'Best Hosting', 
    'Fantastic Hosting' 
]; 

$scope.providerColumns = { 
    price: { 
    text: 'Price', 
    exposed: true 
    }, 
    site: { 
    text: 'Website', 
    exposed: true 
    }, 
    phone: { 
    text: 'Phone Number', 
    exposed: false 
    } 
};

模板

<div class='table-header-row'> 
    <div class='first-header-cell' ng-repeat='obj in firstCellsHeaders'> 
    {{obj.text}} 
    </div> 
    <div class='middle-header-cell' ng-repeat-start='prov in providers' ng-if='providerColumns.price.exposed'> 
    {{prov}} {{providerColumns.price.text}} 
    </div> 
    <div class='middle-header-cell' ng-if='providerColumns.site.exposed'> 
    {{prov}} {{providerColumns.site.text}} 
    </div> 
    <div class='middle-header-cell' ng-repeat-end ng-if='providerColumns.phone.exposed'> 
    {{prov}} {{providerColumns.phone.text}} 
    </div> 
    <div class='last-header-cell' ng-repeat='obj in lastCellsHeaders'> 
    {{obj.text}} 
    </div> 
</div> 
<div class='table-row'> 
    <div class='first-cells' ng-repeat='obj in firstCells'> 
    {{obj.text}} 
    </div> 
    <div class='middle-cells' ng-repeat-start='prov in providers' ng-if='providerColumns.price.exposed'> 
    {{data[prov].price}} 
    </div> 
    <div class='middle-cells' ng-if='providerColumns.site.exposed'> 
    {{data[prov].site}} 
    </div> 
    <div class='middle-cells' ng-repeat-end ng-if='providerColumns.phone.exposed'> 
    {{data[prov].phone}} 
    </div> 
    <div class='last-cells' ng-repeat='obj in lastCells'> 
    {{obj.texLine2}} 
    </div> 
</div>

它本質上是爲了方便角度完成渲染之後重新排序的列建出來的div表。

現在，我已經實現了ng-repeat-start表示的對象是比我以前想象的更加動感，而且我希望能夠有一個平方ng-repeat，即嵌套的重複沒有嵌套的元素，就像人們經常應用解決方案在tbody元素上使用ng-repeat，然後在tr元素上使用ng-repeat，這基本上是一種扁平化的嵌套效果。我需要一個水平元素的解決方案，最好是div s。我不能以任何方式將它們綁在一起，但是，所以不能嵌套div或類似的東西。理想情況下，它看起來像這樣：

<div ng-repeat='prov in providers' ng-repeat='col in providerColumns' ng-if='col.exposed'> 
    {{data[prov][col]}} 
</div>

任何想法？

來源

2016-03-31 ygesher

不上不下我的數據是不是一種選擇 – ygesher

你可以發佈你的JS代碼或對象正在迭代？ – Shota

用而不是去：

<div ng-repeat='obj1 in parent' ng-repeat='obj2 in obj1'> 
    {{content[obj1][obj2]}} 
</div>

爲什麼不使用嵌套ngRepeat，像這樣：

<div ng-repeat='obj1 in parent'> 
    <div ng-repeat='obj2 in obj1'> 
     {{content[obj1][obj2]}} 
    </div> 
</div>

來源

2016-04-12 08:53:48

嵌套不適用於我的用例，因爲我需要將絕對定位後的div移動，並且它會把所有東西都弄糟。 – ygesher

我認爲更改CSS代碼以適應此解決方案要容易得多，而不是構建自己的與當前CSS代碼一起使用的ngRepeat。 –

什麼阻止您更改CSS代碼？ –

雙ng重複平展嵌套對象

回答

相關問題