How to speed up rendering table of checkboxes in Angular.js - javascript

I'm making a series charting tool. For each series, I have 4 categories. I want the user to be able to choose any combination of series and category to plot.
To accomplish this, I created a bootstrap modal with a table of checkboxes for each series/category combination using Angular.js. It works, but I find the rendering of the modal too slow when there are too many series:
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Series Name</th>
<th ng-repeat="col in cols">
{{ col }}
</th>
<th>select all</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(name, insts) in items"
ng-show="([name] | filter:query).length > 0">
<td>{{ name }}</td>
<td ng-repeat="inst in insts">
<input type="checkbox" ng-model="inst.isSelected">
</td>
<td><ui-select-all items="insts" prop="isSelected"></ui-select-all></td>
</tr>
</table>
Plunker demo of what I have: http://plnkr.co/edit/1zmZMpDsGwaKdyL7dFty?p=preview
I'm just learning Angular, so I'm not too sure how to speed this up, or if there is a smarter approach than using a big table of checkboxes.

the best way to speed up any ng-repeat is to use track by $index
<tr ng-repeat="(name, insts) in items track by $index"
ng-show="([name] | filter:query).length > 0">
<td>{{ name }}</td>
<td ng-repeat="inst in insts track by $index">
<input type="checkbox" ng-model="inst.isSelected">
</td>
<td><ui-select-all items="insts" prop="isSelected"></ui-select-all></td>
</tr>

Related

Angular 6: How to detect table data change in Angular?

I am generating a very simple table by binding a table to an array. And I use the contenteditable="true" so I can edit each cell data on the client side. Here is my code:
<table class="table">
<tr>
<th>Id</th>
<th>Value</th>
<th></th>
</tr>
<tr *ngFor="let item of keys">
<td>{{ item.id }}</td>
<td contenteditable="true">
{{ item.Value }}
</td>
<td>
<button type="button" (click)="printContent()" class="btn btn-primary">Print</button>
</td>
</tr>
</table>
How can I detect the text changes on the cell that has contenteditable set to true

Html datatables data to be accessed in typescript component

I want to access the chosen mfRowsOnPage. For example now it is 10.
Later the user might choose 5 or 15. I need this data in component. I
even want to get which page data is shown to the user. Example 1st
page or 2nd page , so on.
this is my table.
<table class="table" [mfData]="stacklist_table| selectedcolumn | search : searchQuery | filter: addFilter : selected" #stacklist="mfDataTable" [mfRowsOnPage]="10">
<thead>
<tr>
<th *ngFor="let colValues of stacklist.data | column: '' : ''">
<mfDefaultSorter by="{{colValues}}">{{colValues|translate}}</mfDefaultSorter>
</th>
</tr>
</thead>
<tbody>
<tr draggable *ngFor="let stack of stacklist.data" [dragOverClass]="'drag-over-border'" [dragData]="stack" [class.active]="checkIfStackElementIsSelected(stack)" (click)="setStacklistRow(stack, $event)">
<td *ngFor="let rowValues of stack | row">{{ rowValues }}</td>
</tr>
</tbody>
<tfoot>
<tr style="height: 50px;">
<td colspan="6">
<mfBootstrapPaginator [rowsOnPageSet]="[50,100,150]" style="position:fixed; margin-top: -15px"></mfBootstrapPaginator>
<!-- <mfBootstrapPaginator [hidden]='!hideElement' (dblclick)="eventEmitDoubleClick($event)" [rowsOnPageSet]="totalVisibleCount"></mfBootstrapPaginator> -->
<!-- <input [hidden]='hideElement' [(ngModel)]="newCount" (click)="doneEditing(newCount)" autofocus /> -->
</td>
</tr>
<tr (click)="loadMoreStackElements()">Load more</tr>
</tfoot>
</table>
How do I go about it?
I am new to it and not understanding the way to access this data.
https://www.npmjs.com/package/angular2-datatable
Can you try [attr.mfRowsOnPage]='10' and check if that works.

Small size for the Calendar control

I'm using Angular Xeditable table directive.I need to use calendar on it and it works fine when I use the below mentioned code.The problem is the calendar control is very big.Can you tell me how to small it ?
<table class="table table-bordered table-hover table-condensed">
<tr style="font-weight: bold">
<td style="width:30%">#L("VmDateReceived")</td>
</tr>
<tr ng-repeat="vendor in vm.vendorDetails">
<td>
<span editable-bsdate="vendor.dateReceived" e-uib-datepicker-popup="MM-dd-yyyy" e-ng-click="opened = !opened" e-is-open="opened" e-name="dateReceived" e-form="vendorInformationForm">
{{ vendor.dateReceived | date:'MM-dd-yyyy' }}
</span>
</td>
</tr>

AngularJS Somehow sorting two tables with one click

I have two tables on an angular page, both with clickable headers for sorting. Somehow, clicking headers in either table sorts BOTH tables, even though they have different column names, and different 'orderByField' variables.
First Table:
<table class="table table-striped table-bordered table-hover" style="width: 100%;">
<thead>
<tr>
<th class="clickable colored_text span7 textLeft" ng-click="flagOrderByField='FlagName'; reverseSort = !reverseSort">Flag Name</th>
<th class="clickable colored_text span2 textLeft" ng-click="flagOrderByField='DateAdded'; reverseSort = !reverseSort">Date Added</th>
<th class="clickable colored_text span2 textLeft" ng-click="flagOrderByField='Expires'; reverseSort = !reverseSort">Expires</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="flag in FlagList | orderBy:flagOrderByField:reverseSort" style="border-top: 1px dashed rgb(200, 200, 200);">
<td ng-class="flag.SystemFlag ? 'text-error' : 'text-success'">{{::flag.FlagName}}</td>
<td>{{::flag.DateAdded | date:'MM/dd/yyyy' }}</td>
<td>{{::flag.Expires | date:'MM/dd/yyyy' }}</td>
</tr>
</tbody>
</table>
Second Table:
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="clickable colored_text" ng-click="orderByField='CourseNumber'; reverseSort = !reverseSort">Course #</th>
<th class="clickable colored_text" ng-click="orderByField='ClassName'; reverseSort = !reverseSort">Course Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="class in classes | orderBy:orderByField:reverseSort | startAt:(currentPage-1)*pageSize | limitTo:pageSize">
<td>{{::class.CourseNumber }}</td>
<td>{{::class.ClassName }}</td>
</tr>
</tbody>
</table>
How can I get these two tables to sort separately? (This page also has a bunch of other tables, in tabs that load on tab-click, that all share this same strange behavior.)
Aha - In a bit of quick intuiting, I noted that both tables used the same 'reverseSort' variable. I changed it for the first table to 'flagReverseSort', and set the default in the controllers.js to false; voila! it works as it should. So not only do the tables need their own orderBy variable, but they need their own, unique, reverseSort variable.

Set ng-checked value from two expressions

Here are my controller scopes
$scope.all = [
{'ID':'1','NAME':'BOB','BMW':1,'AUDI':'0'},
{'ID':'2','NAME':'PETE','BMW':'0','AUDI':'1'}
];
$scope.cars = [
{'ID':'1','CAR':'BMW'},
{'ID':'2','CAR':'AUDI'}
];
Here is my view
<table class="table">
<thead>
<tr>
<th>Name</th>
<th ng-repeat="c in cars">{{c.CAR}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="u in all">
<td>{{ u.NAME }}</td>
<td ng-repeat="c in cars">
<input type="checkbox" ng-checked="{{ u.c.CAR }}">
</td>
</tr>
</tbody>
</table>
Now i want to check the checkboxes based on the value of the cars ng-checked="{{ u.c.CAR }}" but i am not able to set it. And i am not getting any errors in firebug. Does angularjs provide such expressions or not? If now, what is other solution?? I want it to be set in the view itself
Update: I should have done this long back. Here is my JSFIDDLE
If I understand correctly, you want to resolve the 1 or 0 as true and false. You should be able to do something like this:
<tr ng-repeat="u in all">
<td>{{ u.NAME }}</td>
<td ng-repeat="c in cars">
<input type="checkbox" ng-checked="u[c.CAR] == 1">
</td>
</tr>
*Note: you don't need to interpolate { } inside ng-checked.
Here is an updated fiddle.
Yes, your expression is just a bit off:
ng-checked="u[c.car] == 1"
There is a mistake in your expression. Try this:
<tr ng-repeat="u in all">
<td>{{ u.NAME }}</td>
<td ng-repeat="c in cars">
<input type="checkbox" ng-checked="u[c.CAR].toString() == '1'">
</td>
</tr>
I would also suggest ensuring that your data is either all strings or all integers, rather than a mix of both.
Maybe you can solve your problem revisiting your ng-repeat, if you write something like u as object in all, instead of u in all, you can use the u items in the way you're trying to, whatever take a look at this module of angular ui ng-grid it has a lot of option and it can acomplish your needs
#vishwakumar that's a plunker for you, youneed to download the css too to setting in the right way the row height but that's a way to solve you're problem and trust me, ng-grid can solve a lot of problems other than that plunker
EDIT
i have put on it the check too, if you need the comment to understand the code in the plunker write it in the comment of the answer and i'll do it
That is your answer. You have some lame quote in your "all" list! Plus, your ng-repeat template is wrongly written.
Your $scope should be initialized as
function DefaultCtrl($scope) {
$scope.all = [
{'ID':'1','NAME':'BOB','BMW':'1','AUDI':'0'},
{'ID':'2','NAME':'PETE','BMW':'0','AUDI':'1'}
];
$scope.cars = [
{'ID':'1','CAR':'BMW'},
{'ID':'2','CAR':'AUDI'}
];
}
Your $scope's DOM should be
<div ng-app="" ng-controller="DefaultCtrl">
<table class="table">
<thead>
<tr>
<th>NAME</th>
<th ng-repeat="c in cars">{{c.CAR}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="u in all">
<td>{{ u.NAME }}</td>
<td ng-repeat="c in u.BMW">
<input type="checkbox" ng-checked="{{ c }}">
<td ng-repeat="c in u.AUDI">
<input type="checkbox" ng-checked="{{ c }}">
</td>
</td>
</tr>
</tbody>
</table>
</div>
Your answer should be

Categories