When we hover our mouse between two rows of a Microsoft Office word table.
It displays a "+" icon, clicking on it inserts a new row in that table.
I want to achieve the same functionality with AngularJS with in a HTML table.
example:
--------------------
Row 1 | Value
-------------------<"+" Icon>
Row 2 | Value
--------------------
In most cases we have an Icon with each row which enables us to Add a row just below it.But then user will not be able to add row just below the header.
I found the Microsoft Word way very user friendly,so,I am interested in adding that feature in HTML table with AngularJS.
<table>
<tr ng-repeat="step in steps">
<td>{{ step.name }}</td>
<td>{{ step.description }}</td>
<td><button ng-click="addRow($index)">Add</button></td>
</tr>
</table>
$scope.addRow = function(index) {
// Code
$scope.steps.splice(index+1,1,{ step.name :"" , step.descrption:""})
//Code
}
Can't you just add a header row and a special button with the following?
<thead>
<tr>
<td class="add-row"><button ng-click="addRow(-1)">Add</button></td>
</tr>
</thead>
(I added a class to that td just to be able to position it out of the table flow...)
Related
We are building an application to show a table with timetable data.
On the interface the user can set different filters.
I could use a data-grid which would speed up about everything.
I could use a table without grouping and use some sort of lazy fetching which would speed things up.
However we like the layout as is.
The consequence is that the watches are way over 2000 and we are experiencing bottlenecks. It is not that we show hundredths of rows.
How can we make this a bit more performant.
I tried track by, which didn't improve a thing. I tried bind-once but that didn't work either. (Honestly I have no clue how to make it work with key,value objects).
One performance trick might be changing the filters, move and chain them in the controller?
As you also can see, we re-use the same filters a lot, however this is necessary for the group by.
I also haven't seen any lazy-fetching mechanism which works with this kind of custom table / group by.
Hopefully you can help me to point me in the right direction, since I really kinda like the current layout.
The dataset is being displayed in a table and is grouped by date.
Example output:
hrefDateA | hrefDateB | hrefDateC | hrefDateD
DateA
RowA with columns
RowB with columns
RowC with columns
DateB
RowD with columns
RowE with columns
DateC
RowA with columns
RowB with columns
RowC with columns
....
<div ng-if="includeDesktopTemplate" ng-show="whateverdata.length > 0">
<div>
Jump to:
<a ng-href="#tableheader{{$index}}" ng-repeat="(key, value) in whateverdata | filter:filterA() | filter:filterB() | filter:filterC() | groupBy: 'someproperty'" class="someclass">
{{key}}
</a>
</div>
<hr />
<table>
<thead>
<tr>
<th class="timetablerow">HeaderA</th>
<th class="timetablerow">HeaderB</th>
<th class="timetablerow">HeaderC</th>
<th class="timetablerow">HeaderD</th>
<th class="timetablerow">HeaderE</th>
<th class="timetablerow">HeaderF</th>
</tr>
</thead>
<tbody ng-repeat="(key, value) in whateverdata | filter:filterA() | filter:filterB() | filter:filterC() | groupBy: 'someproperty'">
<tr>
<td colspan="6" class="desktoptablegroupby" id="tableheader{{$index}}">
{{key}}
</td>
</tr>
<tr>
<td colspan="6">
<hr class="redbackground" />
</td>
</tr>
<tr ng-repeat="row in value | filter:filterA() | filter:filterB() | filter:filterC()" ng-class-odd="'odd'" ng-class-even="'even'">
<td class="timetablerow">
{{row.propertyA}}
</td>
<td class="timetablerow">
{{row.propertyB}}
</td>
<td class="timetablerow">
{{row.propertyC}} - {{row.propertyD}}
</td>
<td class="timetablerow">
{{row.propertyD}}
</td>
<td class="timetablerow">
{{row.propertyE}}
</td>
<td class="timetablerow">
<div ng-show="{{row.propertyF}}">
<md-tooltip md-direction="{{tooltip.tipDirection}}">
{{row.propertyF}}
</md-tooltip>
<md-icon md-svg-src="~/Content/comment.svg">
</md-icon>
</div>
</td>
</tr>
</tbody>
</table>
<br /><br />
</div>
If I include the code below, watches can go from 3k to 6k
<div ng-show="{{row.propertyF}}">
<md-tooltip md-direction="{{tooltip.tipDirection}}">
{{row.propertyF}}
</md-tooltip>
<md-icon md-svg-src="~/Content/comment.svg">
</md-icon>
</div>
Regarding the code above. One column would show an icon with a tooltip which contains the value of an extra field of the dataset, only when the field contains data. But this also gives issues when the filters are being used (so redraw of screen), since other rows are showing the tooltip then, even when the value of the field of the specific row does not contain a value.(DOM/update/filter issue?)
This is a limitation by the way AngularJS handles change detection and rendering. There's really no easy solution - with emphasis on easy. What I've done on several occasions is use a technique often refered to as virtual-scroll/virtual-repeat. What it basically does is that it only renders the elements that can be seen in the viewport, but adds offsets to the top and bottom of the list/table to keep the scrollbar a constant size, regardless of how many elements are actually rendered. Then whenever you scroll, the elements that pop into view is seamlessly rendered before they become visible. This gives the illusion that it's a single long list/table, when it really only renders what is visible.
There are many libraries that implement this technique. I've personally got experience with the one called angular-vs-repeat but you should take a look at a few and evaluation which fits best your use case. I've also on one occasion implemented my own virtual scroll and it was certainly doable (my usecase in that scenario was that I needed virtual scroll to work both vertically and horizontally).
I'm new to Angular, as will probably become apparent!
I've created a view with a few tables of data to show users different statistics. A simple example would be:
<div class="table-container">
<table class="percs">
<thead>
<tr>
<td>Stat Name</td>
<td>Stat Value</td>
<td>Stat bar</td>
</tr>
</thead>
<tbody>
<tr>
<td>Stat 1</td>
<td>{{ statPercs.stat1 }}</td>
<td><uib-progressbar value="statPercs.stat1"></uib-progressbar></td>
</tr>
<tr>
<td>Stat 2</td>
<td>{{ statPercs.stat2 }}</td>
<td><uib-progressbar value="statPercs.stat2"></uib-progressbar></td>
</tr>
</tbody>
</table>
</div>
I'm using the progressbar just for a small visual representation of the data. However if my understanding so far is correct, although each row in the table only references one value it will incur 2 $$watchers by being referenced in 2 separate tags.
Is it possible to achieve this with just one binding per value (i.e. "statPercs.stat1", "statPercs.stat2", etc) but still be able to re-use that value in multiple columns of the table?
Or even better still, one binding for the object itself (i.e. "statPercs") and still be able to use the values contained in that object in multiple places in the table?
I have two groups of arrays.
First contains header fields =>
$scope.fields=[field0, field1, field2,...,field20];
Second has multiple arrays of data with respect to above field =>
$scope.data=[
[A,B,C,...,someVal20],
[Q,W,E,...,someVal20],
[R,T,Y,...,someVal20],
...
[B,N,M,...,someVal20]
];
Values of fields are shown in a drop down
<select ng-model="filteredOption" ng-options="option.label for option in fields"></select>
The same field values are used as table header.
<tr>
<th ng-repeat="f in fields">{{f.label}}</th>
</tr>
And the data as
<tr ng-repeat="d in data">
<td ng-repeat="i in d track by $index">{{i}}</td>
</tr>
Question is
How do I sort (ascending) the data based on the 'nth' field (which user selects from drop down)?
Its confusing because header and data are two distinct arrays, and data is not in key,value format.
Plunkr here
Column Header - ColumnName in you case it is field0
<th>
<a href="#" ng-click="sortType = 'field0'; sortReverse = !sortReverse">
field0
</a>
</th>
On Column header click it sets the properties of sortType and sortReverse
<tr ng-repeat="d in data | orderBy:sortType:sortReverse"">
<td ng-repeat="i in d track by $index">{{i}}</td>
</tr>
useful link for sorting https://scotch.io/tutorials/sort-and-filter-a-table-using-angular
Thanks to this answer, I've found working solution.
I tracked the selected field's position ($scope.sorter set to that $index). And used it as orderBy:sorter
Still, keeping this question open for others to suggest more acceptable solution.
Maybe I am completely confused how td works as I haven't used tables in my code for yeeaars (strong div believer), or maybe I am confused on how ng-if is attempting to separate my data.
Either way, I am not getting my expected results, but there is otherwise nothing wrong with the code, I think my logic is just off.
Here is a working Plunker http://plnkr.co/edit/LoMEMBYc6kUodb9tcbfM?p=preview
<table>
<tr ng-repeat="z in waiverModalLinks">
<td ng-if="z.id=='color'" class="{{z.id}}">{{z.title}}</td>
<td ng-if="z.id==''" class="{{z.id}}">{{z.title}}</td>
</tr>
</table>
The ultimate end result is to have every other td a different color, however I realize that the current logic is going to put the colored td on the left and the non-colored td on the right. But that was the object I was working with before I realized I needed two separate columns, finding the need for a table in the first place.
But anyway, what is not working then is that.. well they are still stacked. I would expect to see the colored td on the left-hand side of the table and the non-colored td on the right-hand side of the table.
Where's the err in my logic?
Your data model seems to be the source of the confusion. You have a simple array, so each td will be in the same row. If you create a 2d array, you can make a new row for each inner array:
$scope.waiverModalLinks =[
[
{title:"1", link:"", id:"color"},
{title:"2", link:"", id:""}
],
[
{title:"3", link:"", id:"color"},
{title:"4", link:"", id:""}
]
];
And a simpler repeater:
<tr ng-repeat="row in waiverModalLinks">
<td ng-repeat="z in row" class="{{z.id}}">
{{z.title}}
</td>
</tr>
Plunkr: http://plnkr.co/edit/VeXBJcf3naI5bRttQ1Pt?p=preview
z.id is either equal to 'color', or an empty string, but can't be both at the same time. So every row will have at most one cell:
if z.id is equal to color, the generated dom will be
<tr ng-repeat="z in waiverModalLinks">
<td class="{{z.id}}">{{z.title}}</td>
<!-- removed second td -->
</tr>
if z.id is equal to ''', the generated dom will be
<tr ng-repeat="z in waiverModalLinks">
<!-- removed first td -->
<td class="{{z.id}}">{{z.title}}</td>
</tr>
You need two cells in every row: one blank and one filled, or vice-versa:
<table>
<tr ng-repeat="z in waiverModalLinks">
<td ng-if="z.id==''"></td>
<td class="{{z.id}}">{{z.title}}</td>
<td ng-if="z.id=='color'"></td>
</tr>
</table>
I working on a basic AngularJS application with a Firebase backend. Part of the database looks like...
Student
- FirstName
- LastName
- Schedule
-- Course1
-- Course2...
I have a page displaying an html table of students with ng-repeat. Here's the code for my table...
<table>
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Youth/Adult</th>
<th>Courses Selected?</th>
<th>...</th>
</thead>
<tbody>
<tr ng-repeat="(id, student) in students">
<td>{{ student.firstName }}</td>
<td>{{ student.lastName }}</td>
<td>{{ student.type }}</td>
<td>{{ student.hasSelectedCourses }}</td>
<td>...</td>
</tr>
</tbody>
The controller connecting the data and table together is really straight forward. It's just grabbing the array of students from Firebase and chucking it into $scope.
$scope.students = Students;
I'm getting students' first and last names, so I know the repeat is working in general. But I'm having difficulty with one particular column I'd like to display - the Courses Selected? column. I'd like to intelligently fill that with a boolean (probably an icon or something) based on the existance of the Schedule hanging off the Student in the database. I thought of adding something like this to my controller (don't laugh - still learning JavaScript). This didn't work. The error was that "student" was undefined.
$scope.student.hasSelectedCourses = !($scope.student.schedule === null);
I think I could do this another way where I actually store hasSelectedCourses as a boolean in the database, but I'm concerned about the integrity of that field and getting into a situation where a student's selected courses and that field are not in sync with each other.
Is there a way to accomplish this with a bit of logic rather than data storage or is storing this in the database the way to go?
Assuming student.schedule is null if no courses selected (which is the normal pattern with firebase):
<tbody>
<tr ng-repeat="(id, student) in students">
<td>{{ student.firstName }}</td>
<td>{{ student.lastName }}</td>
<td>{{ student.type }}</td>
<td>
<span ng-if="student.schedule">Yes<span>
<span ng-if="!student.schedule">No<span> <!-- these spans could be icons or whatever you want -->
</td>
<td>...</td>
</tr>
</tbody>
Alternatively
<td>
{{student.schedule ? 'Yes' : 'No'}}
</td>
A side note: if you aren't already it's well worth it to include AngularFire with your app. The live 3-way binding is a good way to impress.