Angular Table CSS structure with 3 level - angularjs

Please see below code, which is running fine.
<div ng-repeat="download in productDownloads"
class="container">
<div class="row">
<div class="cell">
<strong>{{download.productName}}</strong>
</div>
</div>
<div ng-repeat="release in download.productReleasesList">
<div class="row">
<div class="cell">
{{release.downloadName}}
</div>
</div>
<div ng-repeat="downloadDetail in release.downloadDetailList">
<div class="row">
<div class="cell">{{downloadDetail.downloadName}}</div>
</div>
</div>
</div>
</div>
Its giving result in 3 separate lines without any CSS.
I want to display like tree/table with row within row.


You are closing the first row before opening the nested ones.
Try this:
<div ng-repeat="download in productDownloads"
class="container">
<div class="row">
<div class="cell">
<strong>{{download.productName}}</strong>
</div>
<div ng-repeat="release in download.productReleasesList">
<div class="row">
<div class="cell">
{{release.downloadName}}
</div>
</div>
<div ng-repeat="downloadDetail in release.downloadDetailList">
<div class="row">
<div class="cell">{{downloadDetail.downloadName}}</div>
</div>
</div>
</div>
</div>
</div>

Related

ng-repeat changing position left to right

I have one problem with angular ng-repeat and bootstrap. I tried divide view on two parts left image, right description, but next line oposite, left description and right image. I would like something like picture below
<div class="container">
<div class="row">
<div ng-repeat="item in items">
<div class="col-xs-6">
<img src="{{item.image}}" alt="#"/>
</div>
<div class="col-xs-6">
<div class="description">
<p>{{item.description}}</p>
</div>
</div>
</div>
</div>
</div>

You can check for odd or even iteration in the repeat loop and apply your class with either float left or right respectively.
<div class="container">
<div class="row">
<div ng-repeat="item in items" ng-class-odd="'img-left'">
<div class="col-xs-6 img-holder">
<img src=".." alt="#"/>
</div>
<div class="col-xs-6 text-holder">
<div class="description">
<p>........</p>
</div>
</div>
</div>
</div>
</div>
CSS
.img-left .img-holder{
float:left;
}
.img-left .text-holder{
float:right;
}
you can handle even condition directly in CSS or like above.

This is my solution. Using ng-class we check if the current index ($index) divided by 2 is zero then we add the float classes either .left or .right.
JSFiddle Demo
<div ng-controller='MyController'>
<div ng-repeat="val in arr">
<div class="row clearfix">
<div class="col-xs-6" ng-class="$index % 2 === 0 ? 'left':'right'">
{{val}}
</div>
<div class="col-xs-6" ng-class="$index % 2 === 0 ? 'right':'left'">
<img src="http://lorempixel.com/400/200/" alt="">
</div>
</div>
</div>
</div>

Insert a row with two columns every four ng-repeat values

I have the next code in Html and AngularJS:
<div class='row'>
<div class='col-md-6' ng-repeat='post in news'>
<div class='post-content'>{{ post.title }}</div>
</div>
</div>
Now, what I need is to push a row with two columns every four posts.
<div class='row'>
<div class='col-md-6'>
<div class='add-content'>Something</div>
</div>
<div class='col-md-6'>
<div class='add-content'>Something</div>
</div>
</div>
How do I do it in AngularJS?
The DOM result what I'm looking for is:
<div class='row'>
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<div class='add-content'>Something</div>
</div>
<div class='col-md-6'>
<div class='add-content'>Something</div>
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
...

essentially you need to be using the built in $index which keeps track on the index it is currently on. Every fourth item implies it should be divisible by four. You also need an ng-if statement to determine wether a dom snippet should be added on said item. Also this calls for the use of the ng-repeat-start instead of ng-repeat. Its seldom used but for this purpose it should work. Code below :
<div class='row' ng-repeat-start="post in news" >
<div class='post-content'>{{ post.title }}</div>
</div>
<div class="row" ng-repeat-end ng-if="($index +1 ) % 4 === 0" >
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
</div>

Drupal 7 customize view theme

I have the HTML as below:
<div class="top-grids">
<div class="container">
<div class="col-md-4 top-grid text-center">
<div class="top-grid-pic">
<img src="images/pic01.png" title="Boots" />
<span>Boots</span>
</div>
<div class="top-grid-pic-info">
Seeall
</div>
</div>
<div class="col-md-4 top-grid text-center">
<div class="top-grid-pic">
<img src="images/pic02.png" title="Boots" />
<span>Casual</span>
</div>
<div class="top-grid-pic-info">
Seeall
</div>
</div>
<div class="col-md-4 top-grid text-center">
<div class="top-grid-pic">
<img src="images/pic03.png" title="Boots" />
<span>Formal</span>
</div>
<div class="top-grid-pic-info">
Seeall
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
In Drupal 7, I have created a view (block) and named it "Featured Products". I have added two fields - image and title. Please check the attached screen shot.
After doing the same, I have created a view file named "views-view-field--new-uc-products--block.tpl.php" and write the code as below:
<div class="top-grids">
<div class="container">
<?php print $output; ?>
</div>
and place this under the 'templates' folder.
Now I see the drupal site and the View Source file which contains the below HTML structure:
<div class="view-content">
<table class="views-table cols-0" >
<tbody>
<tr class="odd views-row-first">
<td >
<div class="top-grids">
<div class="container">
<div class="col-md-4 top-grid text-center">
<div class="top-grid-pic"><div class="product-image"><div class="main-product-image"><img typeof="foaf:Image" src="http://localhost/uberdrupal/sites/default/files/styles/uc_product/public/515sRCSoS9L._SX331_BO1%2C204%2C203%2C200_.jpg?itok=4Exqjiv3" alt="" title="" /></div></div>
</div>
</div>
</td>
<td class="views-field views-field-title" >
<div class="top-grids">
<div class="container">
<span>Twisted</span>
</div>
<div class="top-grid-pic-info">
See All
</div>
</div> </div>
</div>
Can Someone tell me how can I customize the view template so that it can show the HTML as I desired?
Thanks

Go to admin/structure/views/settings and have these settings
Then go to your view and under Advanced, you will have Theme:Information. Click it and you will be shown a list of tpl files that you can change the html as you wish.

Bootstrap columns aren't lining up

I have a layout with 4 columns, 4x col-md-3. When I try to make the screen smaller, these columns have to behave to first 3 columns, then 2, and then 1 when the screen is too small.
But they don't, the columns just become smaller, and don't move beneath the other columns.
I must be missing something.
Code:
<div class="row-fluid vakanties_strip_wrapper">
<div ng-repeat="vakantie in vakanties">
<a ui-sref="details_vakantie/({ vakantieId: vakantie.ID })">
<div class="col-lg-3">
<div class="vakantie_blok" ng-class="$even ? 'red' : 'blue'">
<div class="vakantie_strip_img">
SOME IMAGE
</div>
<div class="vakantie_strip_tekst_beschr">
SOME TEXT
</div>
</div>
</div>
</a>
</div>
<div class="clearfix"></div>
</div>

Try with this option.
<div class="row-fluid vakanties_strip_wrapper">
<div ng-repeat="vakantie in vakanties">
<a ui-sref="details_vakantie/({ vakantieId: vakantie.ID })">
<div class="col-xs-12 col-sm-6 col-lg-3">
<div class="vakantie_blok" ng-class="$even ? 'red' : 'blue'">
<div class="vakantie_strip_img">
SOME IMAGE
</div>
<div class="vakantie_strip_tekst_beschr">
SOME TEXT
</div>
</div>
</div>
</a>
</div>
<div class="clearfix"></div>

Is there a way that I can do an ng-repeat and not have it included in a <div>?

I have coded this:
.row {
display: table-row;
}
.table {
display: table;
}
<div class="table">
<div class="row">
<div class="cell">x</div>
<div class="cell">x</div>
</div>
<div data-ng-repeat="x in modal.xx">
<div class="row">
<div class="cell">y:</div>
<div class="cell">y</div>
</div>
<div class="row">
<div class="cell">z</div>
<div class="cell">z</div>
</div>
</div>
</div>
However the that does the ng-repeat causes problems when it's used inside a display: table-row.
What I really need to do is to have something that will do the repeat and have only the things I want repeating show up. In this case the with ng-repeat in it appears in the dom. I did think of using something like a and putting the ng-repeat in that but I am not sure this is syntactically correct when I'm inside a that's a type of display: table.
Is there a way to do this with angular?

Sure. Assuming you're using Angular 1.2 or later, see ng-repeat-start and ng-repeat-end.
So this:
<div data-ng-repeat="x in modal.xx">
<div class="row">
<div class="cell">y:</div>
<div class="cell">y</div>
</div>
<div class="row">
<div class="cell">z</div>
<div class="cell">z</div>
</div>
</div>
would become this:
<div class="row" data-ng-repeat-start="x in modal.xx">
<div class="cell">y:</div>
<div class="cell">y</div>
</div>
<div class="row" data-ng-repeat-end>
<div class="cell">z</div>
<div class="cell">z</div>
</div>

Resources