Have an angular.js directive that renders as a table. Most of the time, the table is small, so performance is not an issue.
But sometimes, the table has many rows (e.g. thousands), so rendering every row is expensive, as each bound value appears to be evaluated twice, and there are a lot of bound values. And Angular seems to evaluate this table a lot, only to find that all of the values in it are unchanged and thus need not be rerendered, paralyzing the application needlessly.
For instance, the entire table appears to be re-revaluated when the value of $scope.showMenu changes on mouseenter / mouseleave.
Is there a way to tell Angular that the entire table is dependent on some other value, say, $scope.checksum thus if that doesn't change, then the entire table doesn't change?
<div class="header" ng-mouseenter="showMenu=true" ng-mouseleave="showMenu=false">
<!-- show dropdown menu only when hovering over the header -->
<span ng-if="showMenu" class="menu dropdown" > ... menu content goes here...</span>
<h2>{{getTitle()}}</h2>
<p>{{description}}</p>
</div>
<table>
<tr ng-repeat="key in rowKeys">
<td title="{{getRowItem(key)|pretty">{{getRowItem(key)|abbreviated}}</td>
<td>{{getRowValue(key)|number</td>
</tr>
enter code here
</tr>
</table>
If you're using Angular 1.3 and the data in your table is not updated in other moment you must try bind once.
<tr ng-repeat="key in ::rowKeys">
<td>{{::key}}</td>
</tr>
Also ng-mouseenter and ng-mouseleave generate more $watchers, I recommend you use CSS rules to make this effect in your menu.
Related
I am fetching list of posts with sort order from Database and binding with table using ng-repeat of rows. I set them up so you can reorder them with drag-and-drop using Angular Dragula. This works fine.
After dragging, Whenever I click on save button I should get Updated Sort Order, So that I can update it on Database.
Before Drag:
Let Suppose post_sort_order:1,2,3,5
After Drag :
post_sort_order: 4,2,3,1
HTML:
<tbody md-body ui-sortable >
<tr md-row>
<td>
<div dragula-model="vm.GroupData.groups" class="drag-container" dragula='"drag-container"' layout="column" layout-xs="column" layout-align="space-between" layout-margin>
<tri-widget ng-repeat="order in vm.GroupData.groups" flex title="{{::order.group_name | triTranslate}}" title-position="top" palette-background="blue-grey:600" background="primary"></tri-widget>
</div>
</td>
</tr>
</tbody>
Javascript:
Result: vm.GroupsData.groups:
Now, Once I click on Save button, I should get updated sort list like here 4,3,2,1.
Actual post_sort_order: 1,2,3,5
Expected post_sort_order:3,1,5,2
Is there a way to get updated list ?If yes, Please let me know.
Thanks in advance.
I'm trying to create a table with a dynamic number of rows and columns. Each row is a name column followed by some checkboxes
<tr *ngFor="let groupPerms of getGroups()">
<td>{{groupPerms.name}}</td>
<td *ngFor="let permissionType of availablePermissionTypes">
<input id="{{groupPerms.name}}.{{$index}}"
type="checkbox"
[checked]="groupPerms.checked"
(click)="doSomething()"/>
</td>
</tr>
If i drop the outer *ngFor, and 'hardcode' it with the first row, then it works fine and the doSomething method is called.
With the outer *ngFor, the click appears to click on the table row element (it flashes slightly). Using chrome's dev tools, clicking seems to be clicking on the repeat part. Adding a (click) to the tr has no effect
<!--bindings={"ng-reflect-ng-for-of": "[object Object],[object Object"}-->
I won't lie, I have no idea why this has fixed it, but for closure... adding the trackBy (with indexTracker being a function in the component) has done the job. If anyone knows the reason for this working I would be grateful
<tr *ngFor="let groupPerms of getGroups(); trackBy: indexTracker">
<td>{{groupPerms.name}}</td>
<td *ngFor="let permissionType of availablePermissionTypes">
<input id="{{groupPerms.name}}.{{$index}}"
type="checkbox"
[checked]="groupPerms.checked"
(click)="doSomething()"/>
</td>
</tr>
I use the following in order to implement custom column headers for my grid:
<div role="columnheader">
<table class="table-header-rotated">
<theader>
<tr>
<th class="op-table-group-heading rotate-45">
<div class="op-table-group-heading-title rotated-container"
ng-class="{inclined : col.headerCellClass}">
<span>{{col.headerCellClass}}</span>
</div>
</th>
</tr>
<tr>
<th class="op-table-asset-heading rotate-45">
<div class="rotated-container colt{{col.uid}}">
<span>{{col.displayName}}</span>
</div>
</th>
</tr>
</theader>
</table>
</div>
However, clicking on this header does not trigger any change to the sorting. A (probably outdated) article in the wiki suggests to use col.sort() in order to do so. However, doing this fails with v2.sort is not a function.
I have looked at the source code for the current default header templates in ui-grid 3. However, I can find no ng-click in it that would trigger the sort event, so I can only assume they are binding their click listeners somehwere else.
How do I go about enabling sorting in my custom template?
Alright, so after dissecting the original template, it seems that the one crucial component needed to trigger sorts when clicking the header is ui-grid-cell-contents class. Thus, the minimum header template that can be used for sorting is simply <div class="ui-grid-cell-contents"></div>
I have a JSON as given in the link and i want it to display it in a table. i had various options for that and i can able to bring it successfully in that table i also have an extra column for edit and view buttons. i'm facing my difficulty in the view option. i wanted the the particular selected row should be displayed as below
I tried ngHandsontable but the problem i'm facing is i can't able to populate the values in exact cells as i want in the above merged cells and also each row has different entities in my required table. This is a table and i hope it is possible to make it display in the way i want in angularjs.
Can some one help me to solve this
Thanks in advance
note:
I am trying to bring this table below the first table i use ng-show directive for this table so only when the view option clicked it will open on the same page
The below table is 16x4 cells table images and chart has a rowspan=4
images has a colspan=2 and chart has a colspan=4
Example: http://jsfiddle.net/kevalbhatt18/sjpyffd8/1/
I have done with basic functionality. Now apply css on table
<div ng-controller="MyCtrl">
<div ng-repeat="line in parent">
<div class="header">{{line.name}}</div>
<table>
<tr>
<td ng-repeat="satellites in line.satellites">{{satellites.name}}
<div>{{satellites.image}}</div>
</td>
</tr>
<tr>
<td ng-repeat="continents in line.continents">{{continents.name}}
<div>{{continents.image}}</div>
</td>
<tr/>
</table>
<div class="header">Population</div>
<div>{{line.population.graph}}</div>
</div>
</div>
How do I make AngularJS render table columns correctly before the intended content for them is received?
I'm using ng-if to show the content, since I need different elements depending on the value that I get back from an API call, see below. This is the only reason for not using ng-bind, which I assume would be a more legitimate solution.
<td ng-if="someArray.length > 0"><a ng-href="someLink">Yes</a></td>
<td ng-if="someArray.length == 0">No</td>
Using this, due to obvious reasons the particular column is not shown at all while someArray is not initiated. I could check for undefined in the second ng-if, but I would rather have the column be completely empty while waiting for a value.
I am still quite new to AngularJS and I assume that there is a best-practice here.
You can use ng-if in internal dom elements
<td>
<a ng-if="someArray.length > 0" ng-href="someLink">Yes</a>
<p ng-if="someArray.length == 0">NO</p>
</td>
You can move the ng-if into the elements within the td:
<td>
<a ng-if="someArray.length > 0" ng-href="someLink">Yes</a>
<span ng-if="someArray.length == 0">No</span>
</td>