angularjs - Adding extra elements conditionally with ng-repeat -
I am using bootstrap and want to create lines of content with each row of three rows, where each column Content will be represented in NG-Dual in an object
It will look like this:
& lt; Div class = "row" & gt; & Lt; Div class = "col-md-4" & gt; & Lt; div class = "panel panel-primary" & gt; & Lt; div class = "panel-title" & gt; & Lt; H3 class = "panel-title" & gt; Panel title & lt; / H3 & gt; & Lt; / Div & gt; & Lt; Div class = "panel-body" & gt; Panel content & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "col-md-4" & gt; & Lt; div class = "panel panel-primary" & gt; & Lt; div class = "panel-title" & gt; & Lt; H3 class = "panel-title" & gt; Panel title & lt; / H3 & gt; & Lt; / Div & gt; & Lt; Div class = "panel-body" & gt; Panel content & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "col-md-4" & gt; & Lt; div class = "panel panel-primary" & gt; & Lt; div class = "panel-title" & gt; & Lt; H3 class = "panel-title" & gt; Panel title & lt; / H3 & gt; & Lt; / Div & gt; & Lt; Div class = "panel-body" & gt; Panel content & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "col-md-4" & gt; & Lt; div class = "panel panel-primary" & gt; & Lt; div class = "panel-title" & gt; & Lt; H3 class = "panel-title" & gt; Panel title & lt; / H3 & gt; & Lt; / Div & gt; & Lt; Div class = "panel-body" & gt; Panel content & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "col-md-4" & gt; & Lt; div class = "panel panel-primary" & gt; & Lt; div class = "panel-title" & gt; & Lt; H3 class = "panel-title" & gt; Panel title & lt; / H3 & gt; & Lt; / Div & gt; & Lt; Div class = "panel-body" & gt; Panel content & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "col-md-4" & gt; & Lt; div class = "panel panel-primary" & gt; & Lt; div class = "panel-title" & gt; & Lt; H3 class = "panel-title" & gt; Panel title & lt; / H3 & gt; & Lt; / Div & gt; & Lt; Div class = "panel-body" & gt; Panel content & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; What is the best way to go about this? I must
& lt; / Div & gt; Need to add something along the lines of I & Lt; Div class = "row" & gt; Between every three items in NG-repeat.
I'm sure you want to display 3 panels per line
If you are using col-md-4 on your panel, then Bootstrap will hold 3 panels on each line (as long as the screen size is at least MD size) - Therefore, each three rows Adding line to is not unnecessary, it can also prevent some functionalists (such as for SD devices) A. Display only 2). In relation to angular, you can use the index inside the loop using the $ index .
Comments
Post a Comment