Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I am new to Angularjs and i want to show top 5 and bottom 5 rows in between click all functionality which shows all the records. I tried different things but not able to get success.
<div class="col-md-12">
<div class="dataTables_wrapper" id="comparison-table">
<table class="datatable">
<thead>
<tr>
<th width="5%">A</th>
<th width="10%">B</th>
<th width="25%" class="text-left">C</th>
<th width="15%">D</th>
<th width="15%">E</th>
<th width="15%">F</th>
<th width="15%">G</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>##</td>
<td class="text-left">AA</td>
<td>12</td>
<td>12</td>
<td>2</td>
<td>4</td>
</tr>
<tr>
<td>2</td>
<td>##</td>
<td class="text-left">BB</td>
<td>12</td>
<td>11.7</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>##</td>
<td class="text-left">CC</td>
<td>12</td>
<td>11.7</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>4</td>
<td>##</td>
<td class="text-left">DD</td>
<td>11.7</td>
<td>10.7</td>
<td>9</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td>##</td>
<td class="text-left">EE</td>
<td>12</td>
<td>10.4</td>
<td>3</td>
<td>9</td>
</tr>
<tr>
<td class="text-center br" colspan="7"> Click to view all</td>
</tr>
<tr>
<td>32</td>
<td>##</td>
<td class="text-left">FF</td>
<td>12</td>
<td>12</td>
<td>2</td>
<td>4</td>
</tr>
<tr>
<td>33</td>
<td>##</td>
<td class="text-left">GG</td>
<td>12</td>
<td>11.7</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>34</td>
<td>##</td>
<td class="text-left">HH</td>
<td>12</td>
<td>11.7</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>35</td>
<td>##</td>
<td class="text-left">II</td>
<td>11.7</td>
<td>10.7</td>
<td>9</td>
<td>3</td>
</tr>
<tr>
<td>36</td>
<td>##</td>
<td class="text-left">JJ</td>
<td>12</td>
<td>10.4</td>
<td>3</td>
<td>9</td>
</tr>
</tbody>
</table>
</div>
please find the fiddle just for demo purpose -
http://jsfiddle.net/samirshah1187/Br28J/
Assuming I have understood your question correctly, you want the first and last five rows to always be visible, with the option to toggle the rows inbetween? If so, try this:
Controller:
function MyCtrl($scope) {
// Create Test Array
$scope.myArray = Array.apply(null, {length: 20}).map(Number.call, Number)
$scope.hideRows = true
$scope.toggleHiddenRows = function() {
$scope.hideRows = !$scope.hideRows
}
}
View:
<body ng-controller="MyCtrl">
<table>
<tr ng-repeat="value in myArray" ng-hide="hideRows && $index > 4 && $index < (myArray.length - 5)">
<td>Row: {{value}}</td>
</tr>
</table>
<button ng-click="toggleHiddenRows()">Toggle Hidden Rows</button>
</body>
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
This is my practice question. I removed the images and added the table into HTML code format.
This below code is of Un Normalized formed.
<table>
<thead>
<tr>
<th>ENo </th>
<th>BNo </th>
<th>Branch </th>
<th>Name </th>
<th>Designation </th>
<th>Salary </th>
<th>DeptNo </th>
<th>DeptName </th>
<th>FromDate </th>
<th>ToDate </th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>Deer Road</td>
<td>John</td>
<td>Manager</td>
<td>30000</td>
<td>1</td>
<td>HR</td>
<td>05-04-2001</td>
<td>31-12-2006</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>Deer Road</td>
<td>John</td>
<td>Manager</td>
<td>30000</td>
<td>2</td>
<td>Finance</td>
<td>01-01-2007</td>
<td>--</td>
</tr>
<tr>
<td>1</td>
<td>3</td>
<td>Argyll street</td>
<td>Ann</td>
<td>Assistant</td>
<td>8000</td>
<td>1</td>
<td>HR</td>
<td>01-09-2005</td>
<td>--</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
<td>Main Road</td>
<td>David</td>
<td>Supervisor</td>
<td>15000</td>
<td>3</td>
<td>IT</td>
<td>01-07-2002</td>
<td>--</td>
</tr>
</tbody>
</table>
I converted UNF to 1NF by simply adding another Employee ID (EId) column because currently columns are not uniquely identifying.
This below code is of 1NF Form:
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-cly1{text-align:left;vertical-align:middle}
.tg .tg-9qwi{background-color:#fd6864;border-color:inherit;font-weight:bold;text-align:center;vertical-align:middle}
.tg .tg-yla0{font-weight:bold;text-align:left;vertical-align:middle}
.tg .tg-vwbk{background-color:#fd6864;text-align:left;vertical-align:bottom}
<table class="tg">
<thead>
<tr>
<th class="tg-9qwi">Eid</th>
<th class="tg-yla0">ENo </th>
<th class="tg-yla0">BNo </th>
<th class="tg-yla0">Branch </th>
<th class="tg-yla0">Name </th>
<th class="tg-yla0">Designation </th>
<th class="tg-yla0">Salary </th>
<th class="tg-yla0">DeptNo </th>
<th class="tg-yla0">DeptName </th>
<th class="tg-yla0">FromDate </th>
<th class="tg-yla0">ToDate </th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-vwbk">1</td>
<td class="tg-cly1">1</td>
<td class="tg-cly1">2</td>
<td class="tg-cly1">Deer Road</td>
<td class="tg-cly1">John</td>
<td class="tg-cly1">Manager</td>
<td class="tg-cly1">30,000</td>
<td class="tg-cly1">1</td>
<td class="tg-cly1">HR</td>
<td class="tg-cly1">05-04-2001</td>
<td class="tg-cly1">31-12-2006</td>
</tr>
<tr>
<td class="tg-vwbk">1</td>
<td class="tg-cly1">1</td>
<td class="tg-cly1">2</td>
<td class="tg-cly1">Deer Road</td>
<td class="tg-cly1">John</td>
<td class="tg-cly1">Manager</td>
<td class="tg-cly1">30,000</td>
<td class="tg-cly1">2</td>
<td class="tg-cly1">Finance</td>
<td class="tg-cly1">01-01-2007</td>
<td class="tg-cly1">--</td>
</tr>
<tr>
<td class="tg-vwbk">2</td>
<td class="tg-cly1">1</td>
<td class="tg-cly1">3</td>
<td class="tg-cly1">Argyll street</td>
<td class="tg-cly1">Ann</td>
<td class="tg-cly1">Assistant</td>
<td class="tg-cly1">8,000</td>
<td class="tg-cly1">1</td>
<td class="tg-cly1">HR</td>
<td class="tg-cly1">01-09-2005</td>
<td class="tg-cly1">--</td>
</tr>
<tr>
<td class="tg-vwbk">3</td>
<td class="tg-cly1">2</td>
<td class="tg-cly1">1</td>
<td class="tg-cly1">Main Road</td>
<td class="tg-cly1">David</td>
<td class="tg-cly1">Supervisor</td>
<td class="tg-cly1">15,000</td>
<td class="tg-cly1">3</td>
<td class="tg-cly1">IT</td>
<td class="tg-cly1">01-07-2002</td>
<td class="tg-cly1">--</td>
</tr>
</tbody>
</table>
I converted from 1NF to 2NF by breaking the table into three subtables.
this is 2NF subtables code:
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-9ger{background-color:#fcff2f;text-align:left;vertical-align:bottom}
.tg .tg-ctz4{background-color:#3166ff;text-align:left;vertical-align:bottom}
.tg .tg-u24d{background-color:#fcff2f;text-align:left;vertical-align:middle}
.tg .tg-za14{border-color:inherit;text-align:left;vertical-align:bottom}
.tg .tg-7zrl{text-align:left;vertical-align:bottom}
.tg .tg-yla0{font-weight:bold;text-align:left;vertical-align:middle}
.tg .tg-16v0{background-color:#fcff2f;font-weight:bold;text-align:left;vertical-align:bottom}
.tg .tg-exyj{background-color:#34ff34;font-weight:bold;text-align:left;vertical-align:bottom}
.tg .tg-4aos{background-color:#34ff34;text-align:left;vertical-align:bottom}
.tg .tg-xtan{background-color:#3166ff;font-weight:bold;text-align:left;vertical-align:bottom}
.tg .tg-gl5e{background-color:#fcff2f;font-weight:bold;text-align:left;vertical-align:middle}
</style>
<table class="tg">
<thead>
<tr>
<th class="tg-za14"></th>
<th class="tg-7zrl"></th>
<th class="tg-7zrl"></th>
<th class="tg-7zrl"></th>
<th class="tg-7zrl"></th>
<th class="tg-7zrl"></th>
<th class="tg-yla0">2NF</th>
<th class="tg-7zrl"></th>
<th class="tg-7zrl"></th>
<th class="tg-7zrl"></th>
<th class="tg-7zrl"></th>
<th class="tg-7zrl"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-9ger"></td>
<td class="tg-9ger"></td>
<td class="tg-16v0">Employee Table</td>
<td class="tg-9ger"></td>
<td class="tg-u24d"></td>
<td class="tg-7zrl"></td>
<td class="tg-7zrl"></td>
<td class="tg-exyj">Branch Table</td>
<td class="tg-4aos"></td>
<td class="tg-7zrl"></td>
<td class="tg-xtan" colspan="2">Department Table</td>
</tr>
<tr>
<td class="tg-9ger"></td>
<td class="tg-9ger"></td>
<td class="tg-9ger"></td>
<td class="tg-9ger"></td>
<td class="tg-u24d"></td>
<td class="tg-7zrl"></td>
<td class="tg-7zrl"></td>
<td class="tg-4aos"></td>
<td class="tg-4aos"></td>
<td class="tg-7zrl"></td>
<td class="tg-ctz4"></td>
<td class="tg-ctz4"></td>
</tr>
<tr>
<td class="tg-16v0">EId</td>
<td class="tg-16v0">ENo</td>
<td class="tg-16v0">Name</td>
<td class="tg-gl5e">Designation</td>
<td class="tg-gl5e">Salary</td>
<td class="tg-7zrl"></td>
<td class="tg-7zrl"></td>
<td class="tg-exyj">BNo</td>
<td class="tg-exyj">Branch</td>
<td class="tg-7zrl"></td>
<td class="tg-xtan">DeptNo</td>
<td class="tg-xtan">DeptName</td>
</tr>
<tr>
<td class="tg-9ger">1</td>
<td class="tg-9ger">1</td>
<td class="tg-9ger">John</td>
<td class="tg-u24d">Manager</td>
<td class="tg-9ger">30,000</td>
<td class="tg-7zrl"></td>
<td class="tg-7zrl"></td>
<td class="tg-4aos">1</td>
<td class="tg-4aos">Main Road</td>
<td class="tg-7zrl"></td>
<td class="tg-ctz4">1</td>
<td class="tg-ctz4">HR</td>
</tr>
<tr>
<td class="tg-9ger">2</td>
<td class="tg-9ger">1</td>
<td class="tg-9ger">Ann</td>
<td class="tg-9ger">Assistant</td>
<td class="tg-9ger">8,000</td>
<td class="tg-7zrl"></td>
<td class="tg-7zrl"></td>
<td class="tg-4aos">2</td>
<td class="tg-4aos">Deer Road</td>
<td class="tg-7zrl"></td>
<td class="tg-ctz4">2</td>
<td class="tg-ctz4">Finance</td>
</tr>
<tr>
<td class="tg-9ger">3</td>
<td class="tg-9ger">2</td>
<td class="tg-9ger">David</td>
<td class="tg-9ger">Supervisor</td>
<td class="tg-9ger">15,000</td>
<td class="tg-7zrl"></td>
<td class="tg-7zrl"></td>
<td class="tg-4aos">3</td>
<td class="tg-4aos">Argyll Street</td>
<td class="tg-7zrl"></td>
<td class="tg-ctz4">3</td>
<td class="tg-ctz4">IT</td>
</tr>
</tbody>
</table>
after that, I stuck on how to normalized this from the date and to date column.
I need suggestions with which table I have to add this from and to date column?
Normalization never introduces new attributes. You introduced Eid.
This is a practice question, not a real-world database design. For example, employees don't have last names in this design. That's not "real world". But it's a defensible simplification for a practice question.
In the context of a practice question, "Eno" suggests that column should be understood as "Employee number". We'd usually consider "Employee number" in a table like this to be unique, but John and Ann have the same Eno. That raised a red flag for you, and that's a good thing. But in this context, I would have questioned the data first (ask your professor), because that looks like a typo to me. In the context of this practice question, you should consider "Name" to be identifying.
Normalization doesn't proceed by "breaking a table into subtables". Simplifying a little, normalization proceeds by decomposing a table into projections of that table, based on functional dependencies.
You don't have enough information to know what to do with the attributes FromDate and ToDate, because you don't know what those column names mean. That suggests that "FromDate" and "ToDate" are bad names for these columns. Use more descriptive names, so people don't have to guess.
"FromDate" and "ToDate" might have to do with
Designation (John was a manager from FromDate until ToDate),
Branch (John was assigned to Branch from FromDate until Todate),
Department (John was assigned to Department from FromDate until Todate),
Salary (John drew Salary from FromDate until ToDate),
and so on.
This is one place functional dependencies show they're essential.
There are some values returned by ngFor in Total Column. Now I wanted to add those value to get a one grandTotal. I didn't get the idea. Anyone can help me??
In below second table:
I want {{sales.Total}} values to be added and return grand total.
/*****First Table*****/
<table class="table">
<thead>
<tr>
<th scope="col">S.N</th>
<th scope="col">Items</th>
<th scope="col">Quantity</th>
<th scope="col">Rate</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let sales of salesTransaction, let i = index">
<th>{{i+1}}</th>
<!-- <td mat-cell *matCellDef="let salesTransaction">{{salesTransaction.ProductName}}</td> -->
<td>{{sales.ProductName}}</td>
<td>{{sales.Quantity}}</td>
<td>{{sales.Rate}}</td>
<td>{{sales.Total}}</td>
</tr>
</tbody>
</table>
/*****Second Table*****/
<table class="right-table">
<tbody>
<tr>
<th>Sub-Total</th>
<td *ngFor="let sales of salesTransaction">{{sales.Total}}</td>
</tr>
<hr class="divider">
<tr>
<th>Tax</th>
<td>Happy</td>
</tr>
<hr class="divider">
<tr>
<th>Grand Total</th>
<td>0000</td>
</tr>
</tbody>
</table>
You need to create a method that returns grand total
getGrandTotal(): number {
return this.salesTransaction.reduce((acc, val) => acc += val.Total, 0);
}
<tr>
<th>Grand Total</th>
<td>{{getGrandTotal()}}</td>
</tr>
<table class="right-table">
<tbody>
<tr>
<th>Sub-Total</th>
<td *ngFor="let sales of salesTransaction">{{sales.Total}}</td>
</tr>
<hr class="divider">
<tr>
<th>Tax</th>
<td>Happy</td>
</tr>
<hr class="divider">
<tr>
<th>Grand Total</th>
<td>{{salesTransaction.reduce((total, value) => total += value.Total, 0)}}</td>
</tr>
</tbody>
</table>
I am trying to implement a collapsing row in my smarttable. This is a row that is only visible once the user wants to show some more detail. This is what it looks like now:
<table st-table="displayed" class="table table-striped">
<thead>
<tr>
<th st-ratio="20" st-sort="firstName">first name</th>
<th st-ratio="20" st-sort="lastName">last name</th>
<th st-ratio="10" st-sort="age">age</th>
<th st-ratio="30" st-sort="email">email</th>
<th st-ratio="20" st-sort="balance">balance</th>
</tr>
</thead>
<tbody>
<input type="checkbox" ng-model="show"/> {{show}}
<tr ng-repeat="row in displayed">
<td st-ratio="20">{{row.firstName}}</td>
<td st-ratio="20">{{row.lastName | uppercase}}</td>
<td st-ratio="10">{{row.age}}</td>
<td st-ratio="30">{{row.email}}</td>
<td st-ratio="20">{{row.balance | currency}}</td>
</tr>
<tr ng-show="show">
<td>hallo</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-items-by-page="20" st-pagination=""></div>
</td>
</tr>
</tfoot>
</table>
Is there a way of displaying a collapsing detailrow for this table?
plunkr ref:http://plnkr.co/edit/8lSx2v?p=preview
<table st-table="displayed" class="table table-striped">
<thead>
<tr>
<th st-ratio="20">#</th>
<th st-ratio="20" st-sort="firstName">first name</th>
<th st-ratio="20" st-sort="lastName">last name</th>
<th st-ratio="10" st-sort="age">age</th>
<th st-ratio="30" st-sort="email">email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="row in displayed">
<td>
<button ng-if="row.expanded" ng-click="row.expanded = false" class="btn btn-xs btn-default glyphicon glyphicon-chevron-down"></button>
<button ng-if="!row.expanded" ng-click="row.expanded = true" class="btn btn-xs btn-default glyphicon glyphicon-chevron-right"></button>
</td>
<td st-ratio="20">{{row.firstName}}</td>
<td st-ratio="20">{{row.lastName | uppercase}}</td>
<td st-ratio="10">{{row.age}}</td>
<td st-ratio="30">{{row.email}}</td>
</tr>
<tr ng-if="row.expanded" ng-repeat-end="">
<td colspan="2">
<b>Balance<br /></b>
</td>
<td colspan="3" st-ratio="20">{{row.balance | currency}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-left">
<div st-items-by-page="5" st-pagination=""></div>
</td>
</tr>
</tfoot>
</table>
you can call a function with ng-change, and in there you expand the displayd array.
like I did in the plunker:
var limitVers = [];
for (var j = 0; j < 50; j++) {
limitVers.push(createRandomItem());
}
var addedItems = [];
for (var k = 0; k < 20; k++) {
addedItems.push(createRandomItem());
}
var expaVers = limitVers.concat(addedItems);
$scope.displayed = limitVers;
$scope.update = function(show){
show ? $scope.displayed = expaVers : $scope.displays = limitVers;
}
I want to use same ng-show condition in more than 7-8 table rows of a table.
I dont want to repeat the ng-show="same condition" in all 7-8 tr elements.
is there any way i can put the condition in top level?
Below is my code, here sometimes both condition1 and condtion2 are true and sometimes only condition1 is true and some time only condition2 is true
I dont want to repeat conditions everytime.
<table>
<tr ng-show="condition1" >
<td>test1 </td><td>some value</td>
</tr>
<tr ng-show="condition1" >
<td>test2</td><td>some value</td>
</tr>
<tr ng-show="condition2" >
<td>test3</td><td>some value</td>
</tr>
<tr ng-show="condition2" >
<td>test4</td><td>some value</td>
</tr>
<tr ng-show="condition2" >
<td>test5</td><td>some value</td>
</tr>
<tr ng-show="condition2" >
<td>test6</td><td>some value</td>
</tr>
</table>
You can try the below way (instead of div try with span as well):
<table>
<div ng-show="condition1">
<tr>
<td>test1 </td><td>some value</td>
</tr>
<tr>
<td>test2</td><td>some value</td>
</tr>
</div>
<div ng-show="condition2">
<tr>
<td>test3</td><td>some value</td>
</tr>
<tr>
<td>test4</td><td>some value</td>
</tr>
<tr>
<td>test5</td><td>some value</td>
</tr>
<tr>
<td>test6</td><td>some value</td>
</tr>
</div>
</table>
Try
<table>
<tr>
<td>test1 </td><td>some value</td>
</tr>
<tr>
<td>test2</td><td>some value</td>
</tr>
<tbody ng-show="condition2">
<tr>
<td>test3</td><td>some value</td>
</tr>
<tr>
<td>test4</td><td>some value</td>
</tr>
<tr>
<td>test5</td><td>some value</td>
</tr>
<tr>
<td>test6</td><td>some value</td>
</tr>
</tbody>
</table>
I have this XML string and would like to parse and traverse it
<table>
<tbody>
<tr>
<th colspan="1">Issue ID</th>
<th>Role</th>
<th>Abstract</th>
<th>Status</th>
<th colspan="1">Assigned To</th>
<th>Estimate</th>
<th colspan="1">Start Date</th>
<th colspan="1">End Date</th>
<th colspan="1">Actual</th>
<th colspan="1">Milestones</th>
</tr>
<tr>
<td class="highlight-blue" data-highlight-colour="blue">265884</td>
<td class="highlight-blue" data-highlight-colour="blue"> </td>
<td class="highlight-blue" data-highlight-colour="blue">Task 1</td>
<td class="highlight-blue" data-highlight-colour="blue"> </td>
<td class="highlight-blue" data-highlight-colour="blue"> </td>
<td class="highlight-blue" data-highlight-colour="blue"> </td>
<td class="highlight-blue" data-highlight-colour="blue"> </td>
<td class="highlight-blue" data-highlight-colour="blue"> </td>
<td class="highlight-blue" data-highlight-colour="blue"> </td>
<td class="highlight-blue" data-highlight-colour="blue"> </td>
</tr>
<tr>
<td> </td>
<td>QA</td>
<td>Verify fix</td>
<td>In-Progress</td>
<td>Karl</td>
<td>1</td>
<td>Feb 11</td>
<td> </td>
<td>0.25</td>
<td>
<ul>
<li>Feb 11: Change Code Review to "No Review Required"</li>
<li>Feb 11: Requested SB for testing</li>
<li>Feb 13: Still waiting for SB</li>
<li>Feb 18: (need to follow up) -> Done Re-requested SB copy</li>
</ul>
</td>
</tr>
</tbody>
</table>
I would like to get the number of <tr>'s as well as do for-loop in the array to access each column. I looked into XmlReader but not quite sure how to use it without using a GridPanel.
Perhaps Ext.data.Store alone can achieve that, but I'm still not quite familiar with it and can't find any suitable methods here: http://extjs.cachefly.net/ext-3.3.1/docs/?class=Ext.data.XmlReader
Maybe you can use Ext selector (http://docs.sencha.com/extjs/3.4.0/#!/api/Ext-method-select).
Sample code for your case: https://fiddle.sencha.com/#fiddle/4pv