i have a table that uses ng repeat for the columns, and now i want to hide the first and third column. Does anyone know how I would do that?
ng-hide="$first&&$third"
Didn't work
This is how it looks atm:
<th role="columnheader" ng-repeat="column in tableColumns" ng-hide="$first&&$third" ng-if="column.visible">{{column.displayName}}</th>
You can use a counter for that. And check for the value of the counter to add a column. See this bellow code as a reference.
<tr ng-repeat="obj in OrderList">
<td>{{obj.ID}}</td>
<td>{{obj.Name}}</td>
<td ng-if="((++$index != 3)||($index != 1))">
<i>Delete</i>
</td>
</tr>
Hope this helps.
This hides any value at first and third position in an array
<span ng-hide="($index + 1) == ($first || ($first + 3))">{{val.CompID}}</span>
Related
I am new to angular. Just learning it.
I want to bind data with ngFor. but its not showing any data. Kindly help me to solve this
html file :
<tbody class="text-center">
<tr *ngFor="let agent of agentlist ;let i = index">
<td>{{i + 1 + paginationObject?.page * paginationObject?.itemPerPage}}</td>-->
<td>{{agent?.id?agent?.id:''}}</td>
</tr>
</tbody>
error : <!--bindings={ "ng-reflect-ng-for-of": null }-->
Try removing the --> at the end of the first table cell and correct the binding on the second one.
<tbody class="text-center">
<tr *ngFor="let agent of agentlist ;let i = index">
<td>{{i + 1 + paginationObject?.page * paginationObject?.itemPerPage}}</td>-->
<td>{{agent?.id}}</td>
</tr>
</tbody>
Also, you need to make sure that agentlist has something to iterate. maybe putting a console.log(agentlist) and see what it has inside of it in the ts class. If angelist is only declared but never defined you will get that error. Initialize angelist as an empty array to make sure that have an iterable before defining with the final data.
I have this block in thymeleaf where I'm trying to show the name of a protocolVersion isntead of the id. I only have the Id so I pass the list of protocolVersion (protocolVersions) and I'm iterating over it to show the one that matches the id (1007 is just a test).
<th:block th:each="item: ${protocolVersions}">
<tr th:if="${item.id == 1007}">
<td th:text="${item.name}"></td>
</tr>
</th:block>
I'm getting the error message:
Exception evaluating SpringEL expression: "item.id == 1007"
I've also tried something like this, as I've found it in one of the questions here:
<td th:if="${protocolVersions.?[id == '${excelMongoDoc.protocolVersionId}']}"
th:text="${protocolVersions[id == '${excelMongoDoc.protocolVersionId}'].name}">
</td>
But this is not working either. Can anyone help please?
Thanks
The expression is simply: ${protocolVersions.^[id==1007].name}. So you could do this in your table:
<tr>
<td th:text="${protocolVersions.^[id==1007].name}"></td>
</tr>
If you want to check against a variable, rather than hardcoding 1007 something like this:
<th:block th:with="check=1007">
<td th:text="${protocolVersions.^[id==#root.check].name}"></td>
</th:block>
Trying to format a table using Angular where:
If the day of the month changes, then you insert a new row which just contains the date (but also displays the data for that index value immediately below). If the day of the week is the same as before continue inserting the rows.
1) Clearly my code for accessing previous value in index is wrong but I can't seem to find anything clearly which helps.
2) I realise that my current code would compare the full datetime value and not just the day of the month (or week) but I am unsure how to do this in this scenario.
3) when the day changes and I try and insert the date line, I cannot get an additional new row formatted correctly which includes the data for that index value. I have tried playing around with various and combinations.
Please could someone help correct this code or point me in the right direction
Thanks
<table class="table-striped">
<thead>
<tr>
<td>day</td>
<td>time</td>
<td>region</td>
<td>event</td>
<td>period</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let eco of eco_r ; let i = index">
<template [ngIf]="eco.date != eco[i-1].date">
<td colspan="5">{{eco.datetime| date:'longDate' }}</td>
<tr>
<td>{{eco.datetime | date:'EE'}}</td>
<td>{{eco.datetime | date:'shortTime'}}</td>
<td>{{eco.region}}</td>
<td>{{eco.event}}</td>
<td>{{eco.period}}</td>
</tr>
</template>
<template [ngIf]="eco.date == eco[i-1].date">
<td>{{eco.datetime | date:'EE'}}</td>
<td>{{eco.datetime | date:'shortTime'}}</td>
<td>{{eco.region}}</td>
<td>{{eco.event}}</td>
<td>{{eco.period}}</td>
</template>
</tr>
</tbody>
</table>
------------UPDATE ---------------
Following #Iancovici comments I have revised the following
i) corrected to reference eco_r[i-1].date
ii) Changed sql source to provide eco.day_of_month and eco.week_of_year to make it easier to reference and check conditions
iii) updated code to only check previous value when i > 0
I am still unable to get it to display a new line with the date AND also include the data for that value of i on a separate row where it formats correctly. Utilising as in my revised code puts all 5 values into the first column of the next row and messes put the table format. How should I resolve this please?
Thanks
<template [ngIf]="i >0 && eco.day_of_month != eco_r[i-1].day_of_month">
<tr><td colspan="5">{{eco.datetime| date:'longDate' }}</td>
</tr>
<tr> <td>{{eco.datetime | date:'EE'}}</td>
<td>{{eco.datetime | date:'shortTime'}}</td>
<td> {{eco.region}} </td>
<td>{{eco.event}}</td>
<td>{{eco.period}}</td>
</tr>
</template>
Should probbly be *ngIf not [ngIf] in general. But I see in your case it’s ok because you’re using an ng template which means instead of directive *ngIf it’s not a bonded property [ngIf]
Also you're accesing the same instance, should access index of array instead so..
change from
*ngIf="eco.date == eco[i-1].date">
to
*ngIf="eco.date == eco_r[i-1].date">
Update: Two more notes
Make sure you create a table, with tag
Don't be afraid to use paranthesis if conditonal expressions become more complex, so you can distinguish the two conditions.
Try this without the filters, then integrate the filters in.
<table>
<div *ngFor="let eco of eco_r; let i = index">
<div *ngIf="(i > 0) && (eco.day_of_month != eco_r[i-1].day_of_month)">
<tr>
<td colspan="5">{{eco.datetime }}</td>
</tr>
<tr>
<td>{{eco.datetime }}</td>
<td>{{eco.datetime }}</td>
<td> {{eco.region}} </td>
<td>{{eco.event}}</td>
<td>{{eco.period}}</td>
</tr>
</div>
</div>
</table>
I am working on an HTML web page where I have a table with some data in it and I am trying to control CSS for an entire column in the table based on the values in another column and same row
For example, In the following screenshot I have my data
In the above picture, I have Volume, Price and Type. Now, I want to control the color of Price column based on the corresponding value in Type Column. Like for Price=10 I have Type as Sell, so I want to make the value 10 to red color and similarly if type is Buy then Price value should be in Yellow.
I am trying to do that using following script
<td data-bind="text: Volume"></td>
<td data-bind="text: (typeof Price() === 'number') ? Price().toFixed(2) : '',css:{cclientType:Type=='Sell'}"></td>
<td data-bind="text: Type"></td>
But, that doesn't seem to be working.
Provided, the data is coming from a Knockout View model which in turn is pulling from SQL Server.
Is there a better way I could achieve this?
You could add a ko.computed function to each of your data items to help you determine the css:
self.volume = ko.observable(volume);
self.price = ko.observable(price);
self.type = ko.observable(type);
self.priceCss = ko.computed(function() {
if (self.type() == 'buy') {
return 'buy-class';
} else if (self.type() == 'sell') {
return 'sell-class';
} else return '';
});
This can then be added to your markup:
<tr>
<td data-bind="text:volume"></td>
<td data-bind="text:price, css: priceCss"></td>
<td data-bind="text:type"></td>
</tr>
A plunker demonstrating this can be seen here
Dev.
Please, try this! Works.
<td data-bind="text: volume"></td>
<td data-bind="text: (typeof price() === 'number') ? price().toFixed(2) : '',css:{ cclientType: type() == 'sell'}"></td>
<td data-bind="text: type"></td>
I would set styles on the <tr> based on the contents of type column (or any other column) and handle everything you need in CSS.
Eg.
<tr class="sell">
<td>100</td>
<td>10.00</td>
<td>Sell</td>
</tr>
tr.sell td:nth-of-type(2) {
color: red;
}
If you don't like using the nth-of-type selector, you can set a class on the <td> and then your CSS selector would be:
tr.sell td.price {
color: red;
}
I have a problem with my regular expression. I need to match blocks of HTML.
Example-Block here:
<tr class="tr-list " data-id="XX">
<td class="ip-img"><div class="gun-icon"></div><img src="https://example.com/images/stories/HCP/HCP_5.jpg"/></td>
<td class="ip-name ip-sort">Hotel Complex Project</td>
<td class="ip-price ip-sort">297.00</td>
<td class="ip-earnings ip-sort">43</td>
<td class="ip-shares ip-sort">86</td>
<td class="ip-status {'sorter':'currency'}"><img
src="/img/assets/arrow1.png" title="0.989990234375"/></td>
<td class="ip-blank-right"></td>
</tr>
Everyone of these blocks of HTML should match separately which I then want to extract the other data from (eg. ip-name, ip-price, ip-earnings..).
But my current regex matches everything until the "(?=)"-part is not true anymore:
http://regexhero.net/tester/?id=2b491d15-ee83-4dc7-8fe9-62e624945dcf
What do I need to change to have every block as a match?
Greetings! :)
PS.: Hope it is understandable what I mean...
This should get all the tr rows:
<tr class="tr-list[\s\S]+?</tr>
This should get all the tr rows with matching groups for the columns:
<tr class="tr-list[^<]*?<td class="ip-img">(.*?)</td>\s*<td class="ip-name.*?">(.*?)</td>\s*<td class="ip-price.*?">(.*?)</td>\s*<td class="ip-earnings.*?">(.*?)</td>\s*<td class="ip-shares.*?">(.*?)</td>\s*<td class="ip-status.*?">([\s\S]*?)</td>[\s\S]+?</tr>
nested html will require nested array from regular expression's match
it can be done using jquery or manually generate a tree using regular expression
This Regular Expression will capture a whole html block that is not self-enclosed:
var hmtlText="<div bar='baz'>foo</foo>";
var pattern = /<([\w]+)( (( +)?[\w]+=['"](\w+)?['"])?)+( )?(\/)?>((([\t\n\r\s]+)?)+(((.)+)?)+((\10)?)+)+?<\/(\1)>/igm;
console.log((pattern.test(htmlText) ? 'valid' : 'invalid') + ' html block');