how to divide rows to two tables with angularjs
<tr ng-repeat="field in node.fields track by $index" ui-tree-node="" class="ng-scope angular-ui-tree-node" collapsed="false" ng-if="$even">
I have tried this but it is not working for drag and drop
<tr data-ng-repeat="element in awesomeThings">
<div ng-if="$even">
<td class="even">
<a href="#">
{{element}}
</a>
</td>
</div>
<div ng-if="$odd">
<td class="odd">
<a href="#">
{{element}}
</a>
</td>
</div>
</tr>
Related
Inside an ng-repeat I have a table in which I display information using Bootstap collapse, however I need the id to be changed with the loop in order for the data to be displayed in the right place, with my current code it keeps displaying in the same row with each click, here is my code :
<tr ng-repeat=" p in projetsListe ">
<td>{{p.NomProjet}}</td>
<td>{{calcul(p.IdProjet)}}</td>
<td>{{calculTotal(p.IdProjet)}}</td>
<td>{{calcul(p.IdProjet)-calculTotal(p.IdProjet)}}</td>
<td>
<a href="#" ng-click="myFunction(p.IdProjet)" data-toggle="collapse" data-target="#d">
<i class="fa fa-eye"></i>
<span>Voir les détails</span> <i class="fa fa-fw fa-caret-down"></i></a>
<ul id="d" class="collapse">
<table id= "mytable" class="table table-hover" style="display : none;">
<thead>
<tr>
<th>Tache</th>
<th><center>Charge estimée</center></th>
<tr ng-repeat="t in tempnorep">
<td>{{t.NomTache}}</td>
<td><center>{{t.TempsPrevu}} jours<center></td>
</tr>
</table>
</ul>
</td>
</tr>
I believe you wanted to do something like:
<tr ng-repeat=" p in projetsListe ">
<td>{{p.NomProjet}}</td>
<td>{{calcul(p.IdProjet)}}</td>
<td>{{calculTotal(p.IdProjet)}}</td>
<td>{{calcul(p.IdProjet)-calculTotal(p.IdProjet)}}</td>
<td>
<a href="#" ng-click="myFunction(p.IdProjet)" data-toggle="collapse" ng-attr-data-target="#{{p.IdProjet}}">
<i class="fa fa-eye"></i>
<span>Voir les détails</span> <i class="fa fa-fw fa-caret-down"></i></a>
<ul ng-attr-id="{{p.IdProjet}}" class="collapse">
<table id= "mytable" class="table table-hover" style="display : none;">
<thead>
<tr>
<th>Tache</th>
<th><center>Charge estimée</center></th>
<tr ng-repeat="t in tempnorep">
<td>{{t.NomTache}}</td>
<td><center>{{t.TempsPrevu}} jours<center></td>
</tr>
</table>
</ul>
</td>
</tr>
image showing paginations
I have item list with many tables in which initaily i show headers by loop each table header works as accordion and on click any table header one request send to get data for that header and tbody populate accordingly.
I have applied pagination on headers and its working fine but pagination on any tbody not working.
Below I have mentioned HTML code.
<div class="col-md-12">
<!-- start table one -->
<div class="table table-responsive series-tbl series-tbl-m">
<table data-ng-repeat="series in serieses track by series._id" class="table table-striped" id="headingOne">
<thead class="table-blue">
<tr >
<th width="5%"><input ng-click="checkAllTalks(series._id,series.Selected)" ng-model="series.Selected" selected="{{series.Selected}}" type="checkbox"></th>
<th width="28%">{{series.title}}</th>
<th width="22%">{{series.totalCount || 0}} talks</th>
<th width="15%">{{ series.totalDuration || 0 | timestring }}</th>
<th width="15%">${{series.totalPrice || 0}}</th>
<th width="18%" class="th-action-icon">
<!-- <i class="fa fa-plus"></i> -->
<a ng-click="openUpdateSeriesModal('md',series._id)" href="#"><i class="fa fa-pencil"></i></a>
<i class="fa fa-trash"></i>
<a role="button" ng-click="showTalks(series._id)" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><i class="fa fa-caret-down"></i></a>
</th>
</tr>
</thead>
<tbody id="series-{{series._id}}" class="panel-collapse collapse in dn allSeriesTalks" role="tabpanel" aria-labelledby="headingOne">
<tr ng-repeat='talk in seriesTalks track by talk._id'>
<td><input ng-click="checkUncheckTalk(talk._id,talk.Selected)" ng-model="talk.Selected" selected="{{talk.Selected}}" type="checkbox"></td>
<td>{{talk.title}}</td>
<td>{{talk.duration || 0 | timestring }}</td>
<td>{{bytesToMB(talk.size) || 0}} mb</td>
<td>${{talk.price || 0}}</td>
<td class="action-item">
<!-- <i class="fa fa-plus icon-gray"></i> -->
<a ng-click="openUpdateTalkModal('md',talk._id)" href="#"><i class="fa fa-pencil icon-gray" ></i></a>
<a ng-click="deleteTalk(talk._id)" href="javascript:void(0);"><i class="fa fa-trash icon-gray"></i></a>
</td>
</tr>
<tr>
<td colspan="6">
<div data-ng-if="totalTalkCount> 10" class="col-md-12">
<div pagination total-items="totalTalkCount"
ng-model="currentTalkPageNo"
max-size="maxSize"
class="pagination-sm pull-right"
boundary-links="true"
ng-change="talkPageChanged(currentSeriesId)"></div>
</div>
<div data-ng-if="totalTalkCount == 0" class="col-md-2">
<div>No record Found.</div>
</div>
</td>
</tr>
</tbody>
</table>
</div> <!-- end table one -->
</div>
<div class="col-md-12">
<div pagination total-items="totalItems"
ng-model="currentPage"
max-size="maxSize"
class="pagination-sm pull-right"
boundary-links="true"
ng-change="pageChanged()"></div>
</div>
And below controller code
//first it is working properly
vm.currentPage = 1;
vm.maxSize = 5;
vm.pageChanged = function () {
console.log('page changed:', vm.currentPage);
vm.getSeriesList();
//$scope.getMembers();
};
//second its not working
vm.currentTalkPageNo = 1;
vm.talkPaginate = false;
vm.talkPageChanged = function (seriesId) {
console.log('page talk changed:', vm.currentTalkPageNo);//each time it shows 1 page no
vm.talkPaginate = true;
vm.showTalks(seriesId);
//$scope.getMembers();
};
remove below code
data-ng-if="totalTalkCount == 0"
in pagination parent div to
data-ng-class="{ 'dn':totalTalkCount <= 10}"
And use
ng-model="$parent.currentTalkPageNo"
instead of
ng-model="currentTalkPageNo"
css
.dn{display:none;}
I have a problem of scrolling table horizontally inside the collection-repeat and i don't find the solution. Scrolling is working fine on web browser but it does not work on actual android device.
The code is given below
<ion-content>
<ion-refresher on-refresh="doRefresh()"></ion-refresher>
<div class="list">
<div class="item" collection-repeat="lists in list"
item-height="getItemHeight(lists, $index)"
ng-style="{height:getItemHeight(lists, $index)}">
<h2 style="text-align: center;" class="padding">{{lists.name}}</h2>
<p class="text-center padding">
<img ng-src="{{lists.link}}" width="200px" height"250px">
</p>
<div class="padding">
<ion-scroll direction="x" class="wide-as-needed">
<table class="table1">
<tr>
<th>size
</th>
<th>unit
</th>
<th>box packing
</th>
<th>type
</th>
<th>price
</th>
</tr>
<tr ng-repeat="company in lists.array">
<td>{{company.size}}
</td>
<td>{{company.unit}}
</td>
<td>{{company.packing}}
</td>
<td>{{company.type}}
</td>
<td>{{company.price}}
</td>
</tr>
</table>
</ion-scroll>
</div>
</div>
</div>
</ion-content>
<ion-content>
<ion-refresher on-refresh="doRefresh()"></ion-refresher>
<div class="list">
<div class="item" collection-repeat="lists in list"
item-height="getItemHeight(lists, $index)"
ng-style="{height:getItemHeight(lists, $index)}">
<h2 style="text-align: center;" class="padding">{{lists.name}}</h2>
<p class="text-center padding">
<img ng-src="{{lists.link}}" width="200px" height"250px">
</p>
<div class="card">
<ion-item>
<ion-scroll direction="x" class="wide-as-needed" zooming="false"
overflow-scroll="false" style="width: 100%; height:100%">
<table class="table1">
<tr>
<th>size
</th>
<th>unit
</th>
<th>box packing
</th>
<th>type
</th>
<th>price
</th>
</tr>
<tr ng-repeat="company in lists.array">
<td>{{company.size}}
</td>
<td>{{company.unit}}
</td>
<td>{{company.packing}}
</td>
<td>{{company.type}}
</td>
<td>{{company.price}}
</td>
</tr>
</table>
</ion-scroll>
</ion-item>
</div>
</div>
</div>
</ion-content>
I'm new to angular and trying to do the following:
<tr data-ng-repeat="element in awesomeThings">
<div ng-if="$index %2 == 0">
<td class="even">
<a href="#">
{{element}}
</a>
</td>
</div>
<div ng-if="$index %2 != 0">
<td class="odd">
<a href="#">
{{element}}
</a>
</td>
</div>
</tr>
for the above code, both ng-if is passing. Where I'm making mistake?
Try $even and $odd properties. Refer the documentation.
Like :
<tr data-ng-repeat="element in awesomeThings">
<div ng-if="$even">
<td class="even">
<a href="#">
{{element}}
</a>
</td>
</div>
<div ng-if="$odd">
<td class="odd">
<a href="#">
{{element}}
</a>
</td>
</div>
</tr>
You don't need to use ng-if to check whether it's an even or odd element, that functionality is built-in already:
<tr ng-repeat="element in awesomeThings">
<span ng-class="$even ? 'odd' : 'even'">{{element}}</span>
</tr>
Another built-in feature is ng-class which gives you several options to conditionally set a css class, here I'm using the ternary version but there are other ways to use it also.
Here is a working example
Also, here is a good article explaining more about ng-class
You can also use ng-class-even and ng-class-odd.
https://docs.angularjs.org/api/ng/directive/ngClassEven
https://docs.angularjs.org/api/ng/directive/ngClassOdd
Try this in css:
tr:nth-child(even) {
background: #CCC
}
tr:nth-child(odd) {
background: #FFF
}
You could define style for the first item:
tr:first-child {
background: #84ace6
}
I'm trying to understand how I can work with multiple ng-repeat-end's.
I have a table that shows 20 years worth of data, split into 5 year chunks.
Each row on the table displays 5 years worth of data. This is how I am displaying the first 1-5 years.
<table>
<tbody>
<tr ng-repeat="history in HistoryCategory.Category[key]">
<th>{{ history.CompanyName }} 1-5 years</th>
<td ng-repeat="mycredits in history.Histories.slice(0, 5)" ng-switch="mycredits.Status">
<span ng-switch-when="0">Some text</span>
<span ng-switch-when="1">Some text</span>
<span ng-switch-when="2">Some text</span>
<span ng-switch-when="3">Some text</span>
<span ng-switch-when="4">Some text</span>
<span ng-switch-when="null">null</span>
<span ng-switch-default>Error</span>
</td>
</tr>
</tbody>
</table>
<div ng-repeat-end class="scroll-btns">
<div class="scroll-btns">
<div class="scroll-left icon-left" ng-click="scrollLeft()"></div>
<div class="scroll-right icon-right" ng-click="scrollRight()"></div>
</div>
</div>
At the bottom of the table is a DIV with class scroll-btns.. All this does is allow the above table to be scrollable and shows some icons to move left/right.
What I am trying to do now, is show year 6-10, 11-15 & 16-20 (in the same table). I have tried:
<table>
<tbody>
<tr ng-repeat-start="history in HistoryCategory.Category[key]">
<th>{{ history.CompanyName }} 1-5 years</th>
<td ng-repeat="mycredits in history.Histories.slice(0, 5)" ng-switch="mycredits.Status">
<span ng-switch-when="0">Some text</span>
<span ng-switch-when="1">Some text</span>
<span ng-switch-when="2">Some text</span>
<span ng-switch-when="3">Some text</span>
<span ng-switch-when="4">Some text</span>
<span ng-switch-when="null">null</span>
<span ng-switch-default>Error</span>
</td>
<td ng-repeat="emptyCell in getEmptyCells(history.Histories.slice(0, 5).length)"></td>
</tr>
<tr ng-repeat-end>
<th>6 - 10 years</th>
<td ng-repeat="mycredits in history.Histories.slice(5, 10)" ng-switch="mycredits.Status">
<span ng-switch-when="0">Some text</span>
<span ng-switch-when="1">Some text</span>
<span ng-switch-when="2">Some text</span>
<span ng-switch-when="3">Some text</span>
<span ng-switch-when="4">Some text</span>
<span ng-switch-when="null">null</span>
<span ng-switch-default>Error</span>
</td>
</tr>
<tr ng-repeat-end>
<th>11 - 15 years</th>
<td ng-repeat="mycredits in history.Histories.slice(10, 15)" ng-switch="mycredits.Status">
<span ng-switch-when="0">Some text</span>
<span ng-switch-when="1">Some text</span>
<span ng-switch-when="2">Some text</span>
<span ng-switch-when="3">Some text</span>
<span ng-switch-when="4">Some text</span>
<span ng-switch-when="null">null</span>
<span ng-switch-default>Error</span>
</td>
</tr>
</tbody>
</table>
<div ng-repeat-end class="scroll-btns">
<div class="scroll-btns">
<div class="scroll-left icon-left" ng-click="scrollLeft()"></div>
<div class="scroll-right icon-right" ng-click="scrollRight()"></div>
</div>
</div>
With the above I am seeing a ng-repeat-start/end error and the text 6-10years and 11-15years are not displaying.
However, if I only have the one ng-repeat-end (for example for 6-10years) and not the second, the application displays as expected.
**** RESOLVED ****
Resolved by having 2 tags... One with ng-repeat-start, and the other with ng-repeat-end. The tag with ng-repeat-end contains all rows that are 5+ years.
This
<tr ng-repeat-start="item in items"></tr>
<tr></tr>
<tr></tr>
<tr ng-repeat-end></tr>
will give you four tr's for each item.