How to do reduce number of watchers in ng-repeat - javascript

I have a requirement where all the data have to be shown on the same page (so can't use pagination). I am working with angular 1.5 and following is the code :
<div ng-repeat="a in data">
<span>{{a.help}}</span>
<div ng-repeat="b in a.dataAgain">
<span>{{b.helpAgain}}</span>
<table class="table table-bordered" style="text-align:center;">
<tr class="info">
<td><strong>S.No.</strong></td>
<td><strong>Name</strong></td>
<td><strong>Age</strong></td>
<td><strong>Id</strong></td>
<td><strong>Dept</strong></td>
</tr>
<tr ng-repeat="c in b.allData" class="info">
<td>{{$index+1}}</td>
<td>{{c.name}}</td>
<td>{{c.age}}</td>
<td>{{c.id}}</td>
<td>{{c.dept}}</td>
</tr>
</table>
</div>
</div>
In my scenario the number of watchers reaches to around 1500 , i am using ng-stats ng-stats for watching the number of watchers. Can anybody hep me how to reduce the number of watchers.
I found same question over here :
Stackoverflow Question
But there is no proper answer for the same

<div ng-repeat="a in data">
<span>{{::a.help}}</span>
<div ng-repeat="b in a.dataAgain">
<span>{{::b.helpAgain}}</span>
<table class="table table-bordered" style="text-align:center;">
<tr class="info">
<td><strong>S.No.</strong></td>
<td><strong>Name</strong></td>
<td><strong>Age</strong></td>
<td><strong>Id</strong></td>
<td><strong>Dept</strong></td>
</tr>
<tr ng-repeat="c in b.allData" class="info">
<td>{{::$index+1}}</td>
<td>{{::c.name}}</td>
<td>{{::c.age}}</td>
<td>{{::c.id}}</td>
<td>{{::c.dept}}</td>
</tr>
</table>
</div>
</div>
Angular processes the DOM as usual and once the value has been resolved it removes the particular property from it’s internal $$watchers list.
You can read more about it here: More Broad Answer

I would strongly recommend using collection-repeat over ng-repeat it will dramatically improve application performance. Just give it a shot.
<div collection-repeat="b in a.dataAgain">
and
<tr collection-repeat="c in b.allData" class="info">

Related

Cycling through CSS Post classes in Tumblr

I am trying to style my {block:Photo} styles in Tumblr, so that each time a photo is posted, it will cycle through a selection of, for instance, 5 slightly different classes for displaying the picture.
An example of such can be found here (where each photo table has a unique max-width property): http://www.nontemporary.com/
The code I've come up with so far, having made ample use of the Chrome inspector is thus:
{block:Posts}
{block:Photo}
<li class="post photo">
<table width="100%" align="left" valign="top" cellpadding="0" cellspacing="0">
<tbody>
<tr class="postspace">
<td></td>
</tr>
<tr class="postrow">
<td class="postdistrict">
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" align="left" valign="top" class="post1">
<td>
<td class="postdistrict">
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" align="left" valign="top" class="post1">
<td>
</tr>
</tbody>
</table>
</li>
{/block:Photo}
{/block:Posts}
Naturally, I think I'll have to create some custom classes for the widths, but my main question is really how I should go about getting Tumblr to cycle through those widths, as can be seen in the example.
Thanks!
If you want them to cycle through the classes in order (like the example does) you can utilise the fact that tumblr lets you style each number of post.
Here is an example of what you would do:
<li class="post-{block:Post1}1{/block:Post1}{block:Post2}2{/block:Post2}[...]{block:Post15}15{/block:Post15}">
This would render as
<li class="post-1">
with the 1 depending on what number post it is.
From here you can easily make classes for .post-1 through to .post-15.
If you would like something random instead, javascript/jquery will be needed.

smart table using pagination angular

Using Angular smart table lib:
I just want to display the pagination buttons on the bottom. According to the documentation, it looks like st-pagination directives inserts those dom elements in there. However, for me, it is not working. Here is the plunker given by the smart table documentation:http://plnkr.co/edit/wzUHcc9PBF6tzH8iAEsn?p=preview
Here is my table footer code:
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-items-by-page="10" st-pagination="">
</div>
</td>
</tr>
</tfoot>
I must be misunderstanding something. I know you can put your own customized template for the pagination.
Here is a screenshot, of the output and debugger:
You should use <td> tag only. you should not use <div> tag.
OK
<td colspan="5" class="text-center" st-items-by-page="10" st-pagination="">
</td>
NG
<td colspan="5" class="text-center">
<div st-items-by-page="10" st-pagination="">
</div>
</td>

ng-repeat in table and conditional tr

I have a collection of elements of different types. I want to iterate them using ng-repeat, and conditionally draw the right tr per each type.
I can't use ng-repeat-start since I want to use virtual scrolling and none of the libraries I found supports the start/end concept.
Here is a jsfiddle: http://jsfiddle.net/mx6v8j98/1/, which doesn't work. here is the HTML part:
<div ng-app ng-controller="MyCtrl">
<table>
<tbody>
<tr ng-repeat="item in itemsList" ng-switch="$even" ng-class-even="'even'" ng-class-odd="'odd'">
<div ng-switch-when="true">
<td>{{item}} is even</td>
<td>even content</td>
</div>
<div ng-switch-default>
<td>{{item}} is odd</td>
<td>odd content</td>
</div>
</tr>
</tbody>
</table>
</div>
In my real world case, I have many td with complex content, so I don't want to use ng-if/ng-switch-when on each
Update: I can put the ng-repeat on the <tbody> tag, but that looks ugly and I'm not sure what the consequences are regarding styling
Update II: In my case, the 'tr' tag itself is rendered differently according to a condition
As stated in another answer, <div> is not allowed as a child element of <tr>.
You are clearly trying to use <div> as a logical container for ng-switch-when, but since ng-switch-when (and ng-switch-default) supports multi-element, you don't need this container:
<tr ng-repeat="item in items" ng-switch="$even">
<td ng-switch-when-start="true">{{item}} is even</td>
<td>even content 1</td>
<td>even content 2</td>
<td ng-switch-when-end>even content last</td>
<td ng-switch-default-start>{{item}} is odd</td>
<td>odd content 1</td>
<td>odd content 2</td>
<td ng-switch-default-end>odd content last</td>
</tr>
It seems you cannot put <DIV> within <TR> but before <TD>.
Solution 1: Put conditional expression in every <TD>.
<!-- TDs for even row -->
<td ng-if="$even">{{item}} is even</td>
<td ng-if="$even">even content</td>
<!-- TDs for odd row -->
<td ng-if="!$even">{{item}} is odd</td>
<td ng-if="!$even">odd content</td>
Solution 2: For fairly complex table structure, you'd consider create your own directive to represent row cells.

Static <div> next to scrolling <div>

I am working with bootstrap and I have a div, which inside of that is 2 more side by side. Naturally, I took the row approach to get the desired result, but I ran into a problem. The div I am designing is for a small web widget on ozone (not that that matters now) but when I have the window the size it is going to be it pushes the second div down below.
The code, with them stacked (no row implementation) is:
<div style="margin: 1em">
<h4>User Card</h4>
<i class="fa fa-user fa-5x"></i>
<h6>User: {{username.slice(5)}}</h6>
<h6>Total Score: {{totalscore.toFixed(3)}}%</h6>
<table class="table table-hover table-striped">
<thead>
<th>#</th>
<th>Model</th>
<th>Score</th>
</thead>
<tr data-ng-repeat=" item in infractions | orderBy : '-score' | limitTo : 10 " ng-click="launch()" ng-style="setColor(item.score)">
<td>{{$index + 1}} </td>
<td>{{item.name.replace("_"," ")}}</td>
<td>{{item.score.toFixed(3)}}</td>
</tr>
</table>
</div>
So I want the little user icon in the top left corner with username and score below it. And I want the table over to the right (at the same height) but I want to be able to scroll the table if necessary, but the user information to remain static.
EDIT Here is the code that has row implementation in it but still they only stay in the same row when the window is like 3/4 width.
<div id="wrapper">
<div style="margin: 1em">
<h4>User Card</h4>
<div>
<div class="row">
<div class="col-lg-1">
<h6>User: {{username.slice(5)}}</h6>
<h6>Total Threat Score: {{totalscore.toFixed(3)}}%</h6>
</div>
<div class="col-lg-3">
<table class="table table-hover table-striped">
<thead>
<th>#</th>
<th>Risk Model</th>
<th>Score</th>
</thead>
<tr data-ng-repeat=" item in infractions | orderBy : '-score' | limitTo : 10 " ng-click="launchIAT()" ng-style="setColor(item.score)">
<td>{{$index + 1}} </td>
<td>{{item.name.replace("_"," ")}}</td>
<td>{{item.score.toFixed(3)}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
I have a roughly working example here:
http://www.bootply.com/xWByEnAkXE
Basically, your 3/4 width issue is with the column tags you're using. You were using col-lg-* which only applies when the browser window is wide, which caused your issue of only staying in the same row when the browser window was large.
The height of the table is tricky unless you set an explicit CSS height on the table with overflow:scroll.
My example uses position:absolute on the table to set the height to 100% of the parent (using top:0;bottom:0). It's not pretty, and it's prone to break if you try to do too much advanced stuff in there, but it gets the job done.
Hope that helps!
Edit:
Tweaked the example to use media queries.

bootstrap 3 table-responsive not working with angularJS app, I am placing table inside ng-view

I am new to angularjs and I am creating an table rows using ng-repeat.
Below is the code snippet
<div class="table-responsive">
<table class="table table-condensed">
<thead>
<tr>
<th>heading1</th>
<th>heading2</th>
<th>heading3</th>
<th>heading4</th>
<th>heading5</th>
<th>heading6</th>
<th>heading7</th>
<th>heading8</th>
<th>heading9</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="task in taskList">
<td>{{task.item1}}</td>
<td>{{task.item2}}</td>
<td>{{task.item3}}</td>
<td>{{task.item4}}</td>
<td>{{task.item5}}</td>
<td>{{task.item6}}</td>
<td>{{task.item7}}</td>
<td>{{task.item8}}</td>
<td>{{task.item9}}</td>
</tr>
</tbody>
</table>
</div>
and i am loading same in ng-view div
<div ng-view class="container-fluid"></div>
But when I see the above table in mobile mode of chrome browser, table is growing horizontally(out of device width).
Same code works fine if I create a test page with same classes.
Let me know if anything I need to change to use in angular?

Categories

Resources