My html table shows NaN value because of field name has a symbol(/) in between.
below is my code
<tr ng-repeat="user in msg.options | orderBy:sortType:sortReverse | filter:search track by $index"
ng-click="msg.payload = user.send(msg);" style="width:100%" flex>
<td ng-bind="$index+1"></td>
<td ng-bind="user.PalletID"></td>
<td ng-bind="user.Description"></td>
<td ng-bind="user.Location"></td>
<td ng-bind="user.Empty/NonEmpty"></td>
<td style="text-align:center" ng-click="msg.payload = user.send(msg);" >
<img src="http://192.168.137.1:1880/ui/Images/unload32.png" width="30" height="30">
</td>
</tr>
Please help to resolve this issue.
Related
I have the following table in an Angular 8 application where I am looping through some data and displaying the data in the table. In the table I want to use rowspan for "Status" and "Create Date" since these will always be the same. "Name" and "Amount" will differ so need different rows for them but a single entry for Status. I tried rowspan="abc.length" for {{data.status}} but it does not work.
<table class="table tableBorder table-responsive table w-100">
<tr style="text-align: center;" class="bg-gray">
<td class="w-12 bold text-left">Name</td>
<td class="w-10 bold text-left">Amount (Rs.Cr.)</td>
<td class="w-13 bold text-left">Status</td>
<td class="w-8 bold text-left">Create Date</td>
</tr>
<tr *ngFor="let data of abc; let i = index">
<td class="w-12 truncate-text ref-number-truncate line-height23">
{{data.name}}
</td>
<td class="w-8 truncate-text">{{data.amount}}</td>
<td class="w-13 truncate-text">{{data.status}}</td>
<td class="w-10 truncate-text">{{data.createdDate}}</td>
</tr>
</table>
Try [attr.rowspan] as
<td [attr.rowspan]= "abc.length">
Im new to angular, i have a table like this which is having angular data, its not having any controller or model. Its just displaying in html.
<table width="98%" border="0" cellspacing="1" cellpadding="2" class="labels" align="center" id="locc">
<tr style="color:#000;font-size:15px;font-family:Arial, Helvetica, sans-serif;background-repeat:repeat-x" height="30" >
<td colspan="4" align="center"></td>
</tr>
<tr style="color:#000;font-size:15px;font-family:Arial, Helvetica, sans-serif;background-color:gold;background-repeat:repeat-x"
height="30" >
<td width="211" align="center">COMMODITY</td>
<td width="149" align="center" valign="middle" >BUY</td>
<td width="175" align="center" valign="middle" >SELL</td>
</tr>
<tbody ng-repeat="item in newsData | limitTo : 2" >
<tr bgcolor="#FFFFFF" height="40" >
<td align="center" style="background-image:url(images/td.png);color:#000;font-size:15px" >{{item.COMMODITY | limitTo: 18 }}</td>
<td align="center" valign="middle" style="color:#000000;font-size:20px" class="{{item.BCOL}}" ><div > {{item.BUY}} </div></td>
<td align="center" valign="middle" style="color:#000000;font-size:20px" class="{{item.SCOL}}" ><div >{{item.SELL}} </div></td>
</tr>
</tbody>
</table>
The output of the following is like this..
By default all the data is coming under Commodity.. I want to display only the content like 999[GOLD][IMPORTED] and Cut the remaining text after that.
then try limitTo filter:
This shows only number of characters from beginning,
what you want to display:
{{ item.COMMODITY | limitTo: 19 }}
since 999[GOLD][IMPORTED] has 19 characters
I have output tables from php. I have the highest numbers with class topCislo. And every two lines of the result implement the highest numbers in the formula. All this until the full page is loaded.
Output table:
<table class="tabulka">
<tr class="timy">
<td class="box">
<div class="name"><img alt="Barca" src="#" class="logo" title="Barca">Barca </div>
</td>
<td class="cislo">1.08</td>
<td class="cislo">1.12</td>
<td class="cislo">1.07</td>
<td class="cislo">8.50</td>
<td class="cislo"></td>
<td class="growcell"></td>
</tr>
<tr class="timy">
<td class="box">
<div class="name"><img alt="rTE" src="#" class="logo" title="rTE">rTE </div>
</td>
<td class="cislo">5.25</td>
<td class="cislo">6.44</td>
<td class="cislo">6.67</td>
<td class="cislo">6.67</td>
<td class="cislo">8.50</td>
<td class="cislo">6.00</td>
<td class="cislo"></td>
<td class="cislo">4.96</td>
<td class="cislo"></td>
<td class="growcell"></td>
</tr>
</table>
<table class="tabulka">
<tr class="timy">
<td class="box">
<div class="name"><img alt="Sami" src="#" class="logo" title="Sami">Sami </div>
</td>
<td class="cislo"></td>
<td class="cislo"></td>
<td class="cislo">7.76</td>
<td class="cislo"></td>
<td class="cislo"></td>
<td class="cislo"></td>
<td class="cislo"></td>
<td class="cislo"></td>
<td class="cislo"></td>
<td class="cislo"></td>
<td class="growcell"></td>
</tr>
<tr class="timy">
<td class="box">
<div class="name"><img alt="eSuba" src="#" class="logo" title="eSuba">eSuba </div>
</td>
<td class="cislo"></td>
<td class="cislo">1.05</td>
<td class="cislo">1.33</td>
<td class="cislo"></td>
<td class="cislo"></td>
<td class="cislo"></td>
<td class="cislo"></td>
<td class="cislo"></td>
<td class="growcell"></td>
</tr>
</table>
For every two rows 1 formula (2 rows = 1 table). For every table I need result from formula, the result from the formula will only be displayed, nothing will be done anymore.
Class topCislo (the highest number in row) is in href.
Formula:
((((topCislo1 / (topCislo1 + topCislo2)) * topCislo2) + ((topCislo2 / (topCislo2 + topCislo1)) * topCislo1)) / 2)
Please help me?
I have:
<tr ng-class="{{line.color}}" ng-repeat="line in gameRank | orderBy: sortType: sortReverse">
<td>{{$index + 1}}</td>
<td>{{line.username}}</td>
<td>{{line.games}}</td>
<td>{{line.winners}}</td>
</tr>
When I open debugger I see:
<tr class="ng-scope" ng-class="BLUE" ng-repeat="line in gameRank | orderBy: sortType: sortReverse">
<td class="ng-binding">1</td>
<td class="ng-binding">Admin</td>
<td class="ng-binding">0</td>
<td class="ng-binding">0</td>
</tr>
So, my class BLUE is not applied to my element.
How can I fix it?
It should be
<tr ng-class="line.color" ...>
Instead of
<tr ng-class="{{line.color}}" ...>
JSFiddle demo
I am trying to make it so if in my table a status is 'R' then it will replace that 'R' with the glyphicon, glyphicon glyphicon-alert.
I've thought of different ways of doing it such as making it a true or false condition because having 'G' appear is not necessary (if you could assist with making it if it is 'G' display ' ' that would be of use too) but I haven't made much headway with that.
Can someone assist in this?
This is a plnkr of the code in question.
http://plnkr.co/edit/CTRlMFnw4bxXy8wYHTSP?p=preview
<tbody>
<tr class="tt" data-toggle="tooltip" title="Click for more information on {{x.c}}." ng-click="isCollapsed = !isCollapsed" ng-repeat- start="x in projects | filter:query | filter:myFilter | orderBy:orderProperty">
<td class="shrink"><b>{{x.a}}</b></td>
<td class="shrink">{{x.b}}</td>
<td class="shrink"><u>{{x.c}}</u></td>
<td class="shrink">{{x.d}}</td>
<td class="shrink">{{x.e}}</td>
<td class="shrink">{{x.f}}</td>
</tr>
<tr collapse="isCollapsed" ng-repeat-end="">
<td colspan="6">
<h3>Test</h3>
<p>Test</p>
</td>
</tr>
</tbody>
I would fix it like this
<tr class="tt" data-toggle="tooltip" title="Click for more information on {{x.c}}." ng-click="isCollapsed = !isCollapsed" ng-repeat-start="x in projects | filter:query | filter:myFilter | orderBy:orderProperty">
<td ng-class="{'glyphicon glyphicon-alert': x.a == 'R'}"><b ng-if="x.a != 'R'">{{x.a}}</b></td>
<td class="shrink">{{x.b}}</td>
<td class="shrink"><u>{{x.c}}</u></td>
<td class="shrink">{{x.d}}</td>
<td class="shrink">{{x.e}}</td>
<td class="shrink">{{x.f}}</td>
</tr>