angularjs - 复杂的非标准菜单布局和 ng-repeat

Question

AngularJS 的 ng-repeat 很简单，尤其是当您创建的 dom 是一致的时候。

虽然我不知道该怎么做。我有 5 个按钮，这就是我计划声明变量的方式

$scope.sidebarMenus = [
  { menuName : 'Button 1', active : false, width : 'medium-6'},
  { menuName : 'Button 2', active : false, width : 'medium-6'},
  { menuName : 'Button 3', active : false, width : 'medium-6'},
  { menuName : 'Button 4', active : false, width : 'medium-6'},
  { menuName : 'Button 5', active : false, width : 'medium-12'}
];

如果您注意到，有 3 行。我可以在长度为 3 的数组上进行 ng-repeat，但内部 ng-repeat 会中断，因为它们将被分开。也许我错了。

<div class="small-12 large-4 columns sidebar">
<div class="row">
    <a class="medium-6 columns menu-item button">
        <div class="text-center">
            <i class="show-for-large-up fi-page-add size-36"></i>
            <p class="size-12">Button 1</p>
        </div>
        <span class="custom-border-bottom"></span>
    </a>
    <a class="medium-6 columns menu-item button">
        <div class="text-center">
            <i class="show-for-large-up fi-page-edit size-36"></i>
            <p class="size-12">Button 2</p>
        </div>
        <span class="custom-border-bottom"></span>
    </a>
</div>

<div class="row">
    <a class="medium-6 columns menu-item button">
        <div class="text-center">
            <i class="show-for-large-up fi-page size-36"></i>
            <p class="size-12">Button 3</p>
        </div>
        <span class="custom-border-bottom"></span>
    </a>
    <a class="medium-6 columns menu-item button">
        <div class="text-center">
            <i class="show-for-large-up fi-page size-36"></i>
            <p class="size-12">Button 4</p>
        </div>
        <span class="custom-border-bottom"></span>
    </a>
</div>

<div class="row">
    <a class="medium-12 columns menu-item button">
        <div class="text-center">
            <i class="show-for-large-up fi-page size-36"></i>
            <p class="size-12">Button 5</p>
        </div>
        <span class="custom-border-bottom"></span>
    </a>
</div>

<div class="small-12 large-8 columns content">
any text goes in here in the content any text goes in here in the content any text goes in here in the content any text goes in here in the content any text goes in here in the content
</div>
</div>

Answer 1

您应该能够像预期的那样ng-repeat，并让网格系统正确地包装列。如果有6+6，会自动换行到下一行。您不需要手动放置行 div。

<div class="row">
    <a ng-repeat="menu in sidebarMenus" class="{{menu.width}} columns menu-item button">
        <div class="text-center">
            <i class="show-for-large-up fi-page-add size-36"></i>
            <p class="size-12">{{menu.menuName}}</p>
        </div>
        <span class="custom-border-bottom"></span>
    </a>
</div>