AngularJS - How to work with multiple ng-repeat-end - angularjs

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.

Related

how get groups last column element

How use css selector find the last element in same elements each line on python? I'm using package pyquery.
I has tried tr td:nth-child(2) .score.fill:last-child, tr td:nth-child(2) .score.fill:nth-last-child(1). all failed.
<table>
<tbody>
<tr>
<td>Vote A</td>
<td>
<span class="score fill">1</span>
<span class="score">2</span>
<span class="score">3</span>
<span class="score">4</span>
<span class="score">5</span>
</td>
</tr>
<tr>
<td>Vote B</td>
<td>
<span class="score fill">1</span>
<span class="score fill">2</span>
<span class="score fill">3</span>
<span class="score fill">4</span>
<span class="score fill">5</span>
</td>
</tr>
<tr>
<td>Vote C</td>
<td>
<span class="score fill">1</span>
<span class="score fill">2</span>
<span class="score fill">3</span>
<span class="score">4</span>
<span class="score">5</span>
</td>
</tr>
</tbody>
</table>
I want get result like this:
<span class="score fill">1</span>
<span class="score fill">5</span>
<span class="score fill">3</span>
this won't work, because of .score.fill:last-child this selector means element with classes score and fill AND also last child.
You can select this with only CSS, you have to located this by JS and for examle add one more class for them.
This is feature which will be in new css :nth selectors here is link
Here is something can help

Data grid pagination not showing in the angularjs

As per this link i have used all the libs and functions but i can't see the pagination buttons as like above link demo.
I am loading data from the angularjs get method, After data retrieved i am showing this grid. Everything is working good but only pagination is not working.
Item per page is showing only pagination numbers only not showing.
This my HTML code:
<div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-9 text-right">
<form class="form-inline pull-right margin-bottom-basic">
<div class="form-group">
<grid-pagination max-size="5" boundary-links="true" class="pagination-sm" total-items="paginationOptions.totalItems" ng-model="paginationOptions.currentPage" ng-change="reloadGrid()" items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
</div>
</form>
</div>
</div>
<table class="table media-table-data">
<thead>
<tr>
<th class="sortable">
Media Type
</th>
<th sortable="title" class="sortable">
Media Name
</th>
<th class="sortable">
Created By
</th>
<th class="sortable">
Created Date
</th>
<th class="sortable">
Last Modified
</th>
<th class="sortable">
Status
</th>
<!-- <th class="st-sort-disable th-dropdown">
<select class="form-control width-15"
filter-by="statusDisplay"
filter-type="select"
ng-model="status"
ng-change="filter()">
<option value="">All Statuses</option>
<option ng-repeat="option in statusOptions track by option.value"
value="{{option.value}}">{{option.text}}
</option>
</select>
</th> -->
<th class="sortable">
Action
</th>
</tr>
</thead>
<tbody>
<tr ng-show="!medialength">
<td colspan="7" align="center">No Media Available</td>
</tr>
<tr grid-item>
<td>
<a href="" ng-click="goToPlay(item.id,'member.play')">
<span class="filetype" ng-class="{'videofile': item.mediaType==1 || item.mediaType==3,'audiofile': item.mediaType==2}"></span>
<!-- <span style="background:url ({{ item.thumbnail ? item.thumbnail : '/assets/images/grey.png' }})" ></span> -->
<span class="media-thumbline" style="background:url({{ item.thumbnail ? item.thumbnail : '/assets/images/grey.png' }})"></span>
<span class="media-time">{{ item.mediaFileDuration | toMinSec }}</span>
</a>
</td>
<td ng-bind="item.title"></td>
<td ng-bind="userData.name"></td>
<td>{{ item.createdAt | date : "MMM dd, yyyy" }}</td>
<td>{{ item.updatedAt | date : "MMM dd, yyyy" }}</td>
<td>
<label class="inprogresstext" ng-show="item.mediaStatus==1">
<i class="fas fa-sync fa-spin"></i> Upload inprogress</label>
<label class="inprogresstext" ng-show="item.mediaStatus==2">
<i class="fas fa-sync fa-spin"></i> Transcription inprogress</label>
<label class="completedtext" ng-show="item.mediaStatus==3">
<i class="fas fa-check-circle"></i> Completed</label>
<label class="failedtext" ng-show="item.mediaStatus==4">
<i class="fas fa-exclamation-triangle"></i> Upload Failed</label>
<label class="failedtext" ng-show="item.mediaStatus==5">
<i class="fas fa-exclamation-triangle"></i> Transcription Failed </label>
</td>
<td>
<div class="dropdown drop-position" title="more">
<ul class="dropdown-menu dropdwnicon-menu">
<li><a ng-href="{{item.mediaFile}}" download><i class="material-icons">file_download</i> Download</a></li>
<li><a ng-click="openeditModal(item)"><i class="material-icons">mode_edit</i>Edit</a></li>
<li><a ng-hide="item.mediaStatus==2 || !item.mediaStatus==1" ng-click="openDeleteModal(item)" title="Delete {{item.fileType == 2 ? 'Audio' : 'Video'}}"><i class="material-icons">delete</i>Delete</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
<div class="col-lg-12 col-md-12 col-sm-12 table-footer-page" ng-if="medialength">
<div class="pager-btn-section">
<form class="form-inline">
<div class="form-group">
<grid-pagination max-size="5" boundary-links="true" class="pagination-sm" total-items="paginationOptions.totalItems" ng-model="paginationOptions.currentPage" ng-change="reloadGrid()" items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
</div>
<div class="form-group items-per-page">
<label for="itemsOnPageSelect2">Items per page:</label>
<select id="itemsOnPageSelect2" class="form-control input-sm" ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
<option>10</option>
<option>25</option>
<option>50</option>
<option>75</option>
</select>
</div>
</form>
</div>
</div>
</div>
I forgot to add 'pagination' dependency injector in my module, Thats why pagination is not loaded. Now it's fixed.

AngularJS Recursion in html table

ok i have this code:
<table class="table">
<thead>
<tr>
<th>
Description
</th>
<th>
Amount
</th>
<th>
Period
</th>
</tr>
</thead>
<tbody data-ng-repeat="expense in expenses">
<tr class="danger">
<td>
<button data-ng-if="expense.Children.length > 0 && expense.ShowChildren" type="button" class="btn btn-default btn-sm" ng-click="expense.ShowChildren = false">
<span class="glyphicon glyphicon-minus" aria-hidden="true" ></span>
</button>
<button data-ng-if="expense.Children.length > 0 && !expense.ShowChildren" type="button" class="btn btn-default btn-sm" ng-click="expense.ShowChildren = true">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
{{ expense.Description }}
</td>
<td>
{{ expense.Amount }}
</td>
<td>
{{ expense.Period }}
</td>
</tr>
<tr class="active" ng-show="expense.ShowChildren" data-ng-repeat="child in expense.Children">
<td>
    {{ child.Description }}
</td>
<td>
    {{ child.Amount }}
</td>
<td>
    {{ child.Period }}
</td>
</tr>
</tbody>
</table>
now i want to expense can have a child like u see in the photo
and this is work but when the child have child how I display that ?
i want to do the plus/minus button
I have been using a table from swimlane with much success lately. This is a feature that they support. This table is available here.
http://swimlane.github.io/angular-data-table/
You can do it, but you basically have to use expressions that insert the buttons where appropriate and ng-show/css to hide and display the rows when the buttons are clicked and a lot of other manual work.
I found a easy way to do it
Tree View: http://jsfiddle.net/brendanowen/uXbn6/8/
its better then other ways and more simple

How to divide rows to two table with angularjs

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>

AngularJS - Basic ng-repeat with ng-switch

I have a simple ng-repeat, that displays a list of statuses. I wanted to extend this ng-repeat to ng-switch to display a value depending on the status.
Current ng-repeat:
<td ng-repeat="myStatus in history.Status.slice(0, 12)">
{{ myStatus }}
</td>
With ng-switch:
<td ng-repeat="myStatus in history.Status.slice(0, 12)" ng-switch="myStatus">
<span ng-switch-when="1">test1</span>
<span ng-switch-when="2">test2</span>
<span ng-switch-when="3">test3</span>
<span ng-switch-when="4">test4</span>
<span ng-switch-when="5">test5</span>
<span ng-switch-when="6">test6</span>
<span ng-switch-when="7">test7</span>
<span ng-switch-default>Error</span>
</td>
However, witht eh above ng-switch, nothing is displayed.
Works at my end, here is the Plunker
However as a suggestion i would prefer to use a function expression instead of ng-switch.
<td ng-repeat="myStatus in history.Status.slice(0, 12)">
<span>{{getStatus(myStatus)}}</span>
</td>
getStatus is a function which would return the required information.
Use This
<td ng-repeat="myStatus in history.Status.slice(0, 12)" >
<span ng-switch="myStatus">
<span ng-switch-when="1">test1</span>
<span ng-switch-when="2">test2</span>
<span ng-switch-when="3">test3</span>
<span ng-switch-when="4">test4</span>
<span ng-switch-when="5">test5</span>
<span ng-switch-when="6">test6</span>
<span ng-switch-when="7">test7</span>
<span ng-switch-default>Error</span>
</span>
</td>

Resources