How to highlight a clicked row in ng-repeat? - javascript

I have tried the other solutions but none of them have worked for me. They usually involve using the 'id' attribute of the rows in ng-repeat rows. But my table looks something like this.`
<table>
<tr class="serviceRows" ng-repeat="(key, value) in serviceNameAndStatus | custom:search track by $index">
<td> {{key}} </td>
<td> {{value.status}} </td>
</tr>
</table>
I am not able to use the id property. I need an alternative way to highlight the clicked row in the table.

Related

Way to find a td inside of a tr. (Javascript)

I am working for a update on a chrome extension for a page where I have the following table.
<tr class="MessageContent">
<td colspan=3>
data
</td>
</tr>
I am trying to change the second tables color.
I have access to the first table, but need to somehow select the second table.
document.getElementsByClassName("MessageContent")[0]; // First table
Nothinng I have tried has worked.
Use querySelector instead, to select the first <td> inside a <tr class="MessageContent">:
document.querySelector('tr.MessageContent > td').style.backgroundColor = 'yellow';
<table>
<tr class="MessageContent">
<td colspan=3>
data
</td>
</tr>
</table>
If you need to be more specific and are sure the td always has colspan=3, then
document.querySelector('tr.MessageContent > td[colspan="3"]');

Click not working within an *ngFor repeated table row (Angular)

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>

Update model based on ng-repeat of array

Sorry if you find this question's solution is simple or silly.
Need suggestions or solution on this angular part.
I have an object containing array("value"), as shown below.
scope.resp.DefaultData.graphRowData = [
{YName:"Mary", value:[1,4], points:1},
{YName:"Tom", value:[2,5], points:1}
];
My Code viewer uses this style to render the array.
<table>
<tbody>
<tr ng-repeat="rowLabels in resp.DefaultData.graphRowData track by $index">
<th>
<input type="text" value="{{rowLabels.YName}}" ng-model="rowLabels.YName"/>
</th>
<td ng-repeat="value in rowLabels.value track by $index">
<input type="text" ng-model="value"/>
</td>
</tr>
</tbody>
</table>
The html viewer would render like below way:
<table>
<tbody>
<th>Mary</th><td>1</td><td>4</td>
<th>Tom</th><td>2</td><td>5</td>
</tbody>
</table>
Now to my question:
The table displays the data as per the model but if i try to update the table with custom or edit the values, doesn't update the model and the value remains same
For example: Mary has two tags of 1 and 4 values, if I try to change the 1 to 2 and 4 to 5, the data inside the model remains same without update.
Is there any way to fix in my code or should I change the array into array of objects like below
value:[{val:1},{val:4}]
and so ... for other objects under resp.DefaultData.graphRowData? Then it would work fine. Just confused why for array not working in angular js in my code! :(
You need to pass a reference of array instead of value in ng-model
<tr ng-repeat="rowLabels in resp.DefaultData.graphRowData track by $index">
<th>
<input type="text" value="{{rowLabels.YName}}" ng-model="rowLabels.YName"/>
</th>
<td ng-repeat="value in rowLabels.value track by $index">
<input type="text" ng-model="rowLabels.value[$index]"/>
</td>
</tr>
check this working plunker

ng-if only deletes innerHTML in my table

I am making a custom directive which will paginate and make my table sortable. I am trying to make it so that multiple data types will work with the sorting with no effort from the user. Here is my problematic html in my templateUrl:
<tr ng-repeat="row in cndPaginatedObject track by $index">
<td ng-repeat="data in row track by $index" ng-if="!isValidDate(row[cndTableHeaders[$index]])">
{{row[cndTableHeaders[$index]]}}
</td>
<td ng-repeat="data in row track by $index" ng-if="isValidDate(row[cndTableHeaders[$index]])">
{{row[cndTableHeaders[$index]] | date: cndDateFormat}}
</td>
</tr>
I would prefer to use ng-if as opposed to ng-show/hide because it would unnecessarily duplicate DOM elements with ng-show/hide and just not show them. I have tried both ways, but I get the same result either way. The content of columns with dates in them don't show up, but the td itself is still there taking up space. So, I end up having three headers for columns and more than three columns. As far as I was aware, ng-if is supposed to remove the entire element from the DOM.
here is my other code of significance:
scope.isValidDate = (data) => {
var timestamp = Date.parse(data);
return !(isNaN(timestamp));
}
As for cndPaginatedObject, it is just an array of objects with multiple strings contained within. Thank you for any help in advance!
UPDATE:
Just thought I would also add that the cndTableHeaders is literally the table headers. cndPaginatedObject uses the table headers as the keys to each of the values. This way they show up in the proper order in the table.
Two ways to do what you're doing better without the need to produce extra doms and looping a ng-repeat twice
A better way to do what you want to do is
<tr ng-repeat="row in cndPaginatedObject track by $index">
<td ng-repeat="data in row track by $index">
{{(!isValidDate(row[cndTableHeaders[$index]])) ? row[cndTableHeaders[$index]] : row[cndTableHeaders[$index]] | date: cndDateFormat}}
</td>
</tr>
Or add a span inside the with the ng-if logic
<tr ng-repeat="row in cndPaginatedObject track by $index">
<td ng-repeat="data in row track by $index"">
<span ng-if="!isValidDate(row[cndTableHeaders[$index]])>
{{row[cndTableHeaders[$index]]}}
</span>
<span ng-if="isValidDate(row[cndTableHeaders[$index]])">
{{row[cndTableHeaders[$index]] | date: cndDateFormat}}
</span>
</td>
</tr>
Alternatively you could create your own filter which checks if date is valid and then using the date filter to filter it.

Get key values and create a table header

I have an angularjs application that basically takes JSON and creates a HTML table, with the keys in the <thead> and the values as table rows.
I have a JSFiddle here where I take the JSON and create table rows based on the values. But I can't figure out how to take the keys and align them with the values as table headers.
My angular code:
<tr ng-repeat='row in rows'>
<td ng-repeat="data in row.data">
{{data}}
</td>
</tr>
and:
function TableController($scope){
$scope.rows = data;
}
Take a look here: How can I iterate over the keys, value in ng-repeat in angular
<tr ng-repeat="(key, value) in data">
<td> {{key}} </td> <td> {{ value }} </td>
</tr>
====EDIT==== Since you're doing it all in the same table, you'll need to do it a different way. You need to separate the header values while you're still in the controller so that you have a clean way to iterate over your list. Here the fiddle: http://jsfiddle.net/L93v5/1/
Your revised way looks bad because there are two different tables and the cell sizes are different. This will keep it all in the same table and make things a bit cleaner.

Categories