Clever Geek Handbook

Complex custom menu and ng-repeat

AngularJS 'ng-repeat is simple, especially if the dom you create is consistent.

I cannot figure out how to do this. I have 5 buttons and this is how I planned to declare the variable

$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'}
];

If you noticed, there are 3 lines. I can ng-repeat on an array of length 3, but inside the ng-repeat will break as they are separated. Maybe I'm wrong.

<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>
+3


source to share


2 answers


You should be able to simply ng-repeat

, as expected, and have a grid system that terminates columns correctly. If there is 6 + 6, it automatically completes to the next line. You don't need to manually place the line separators.



<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>
+4


source


I see three ways to solve this problem:



  • You are simplifying your HTML and trying to make the layout with CSS only, using some clever widths and inline-block

    display, or any style like a grid. I don't think the name of your CSS classes should be part of your model. At best, weight is like 1

    or 2

    (separation of concerns).

  • Create a custom directive grid-buttons

    that displays a list of your buttons in a tab and dynamically prepares the layout.

  • Structure your model to reflect easily in your DOM. One array per line, for example:

     $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}
   ]
 ];

    (In this case, I would recommend using style flexbox

    )

0


source






More articles:


All Articles