复杂的非标准菜单布局和 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>

Answer 2

我可以看到三种解决方法：

您简化了 HTML 并尝试仅使用 CSS 进行布局，使用一些巧妙的宽度和 inline-block 显示或任何类似网格的样式。我不认为你的 CSS 类的名字应该是你模型的一部分。最多像 1 或 2 这样的权重（关注点分离）。
创建自定义指令 grid-buttons，将您的按钮列表作为输入并动态准备布局。

构造您的模型，使其很容易反映在您的 DOM 中。每行一个数组，例如：

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

（在这种情况下我建议使用 flexbox 样式）

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

complicated non-standard menu layout and ng-repeat

zurb-foundation

angularjs

ng-repeat