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

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>

Related

How to highlight a clicked row in ng-repeat?

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.

How to design the following table in Angularjs

I have a JSON as given in the link and i want it to display it in a table. i had various options for that and i can able to bring it successfully in that table i also have an extra column for edit and view buttons. i'm facing my difficulty in the view option. i wanted the the particular selected row should be displayed as below
I tried ngHandsontable but the problem i'm facing is i can't able to populate the values in exact cells as i want in the above merged cells and also each row has different entities in my required table. This is a table and i hope it is possible to make it display in the way i want in angularjs.
Can some one help me to solve this
Thanks in advance
note:
I am trying to bring this table below the first table i use ng-show directive for this table so only when the view option clicked it will open on the same page
The below table is 16x4 cells table images and chart has a rowspan=4
images has a colspan=2 and chart has a colspan=4
Example: http://jsfiddle.net/kevalbhatt18/sjpyffd8/1/
I have done with basic functionality. Now apply css on table
<div ng-controller="MyCtrl">
<div ng-repeat="line in parent">
<div class="header">{{line.name}}</div>
<table>
<tr>
<td ng-repeat="satellites in line.satellites">{{satellites.name}}
<div>{{satellites.image}}</div>
</td>
</tr>
<tr>
<td ng-repeat="continents in line.continents">{{continents.name}}
<div>{{continents.image}}</div>
</td>
<tr/>
</table>
<div class="header">Population</div>
<div>{{line.population.graph}}</div>
</div>
</div>

Knockout.js Tracking Selected Checkboxes

I have a html grid that returns a checkbox with each row. Currently I have these bound with knockout to my viewmodel. I've gotten far enough to capture the id of what is checked for a row but I'm not sure how to make Knockout give me a list of all rows checked and the content of every cell for the row.
Ultimately the intent is to let users select multiple rows from this table and then export that data. So I need a good way to gather the entire row up.
I've only been using Knockout for about a week so am I trying to get it to track something that perhaps I'd be better of just looping through the table with javascript?
<tbody data-bind="foreach: projectListing">
<tr data-bind="css: $data.rowclass">
<td><input type="checkbox" data-bind="value: $data.id, checked: $root.selectedRows, click: $root.toggleRowSelection"/></td>
<td data-bind="text: $data.SORT_ID"></td>
<td data-bind="text: $data.PROJ_ID"></td>
</tr>
</tbody>
*I know that code isn't enough to go on but I had to put something in here so I could list a link to jsFiddle.
I have a fiddle going that represents this to show code I have so far. What I'd like to do with this fiddle is each time I check the checkbox, the entire row content should show up. That would get me to the place I need to be in my real project.
Any ideas on how to go about this?
Here is what I have so far.
http://jsfiddle.net/robhortn/ad2Yu/4/
Instead of getting the id with the checked binding, you can create a selectedItems computed to get the selected items objects
self.selectedItems = ko.computed(function() {
return self.availableItems().filter(function(item) {
return item.Selected();
});
});
Html
Selected Books:
<div data-bind="foreach: $root.selectedItems">
<span data-bind="text: Name"></span>
<br/>
</div>
See this JSFiddle

using ng-repeat filter without hiding filtered out rows

I'm trying to do the following:
1. use ng-repeat to create an html table.
2. use an input field for the user to enter text
3. when the text is contained in a set of specific cells, the relevant rows will perform some kind of animation (lets say change their background color).
I have used till now ng-repeat with the filter option, but it hides the rows which doesn't match the criteria while I wish them to be presented.
This is my current code:
<input id="filterPositions" ng-change="showFiltered()" type="search" ng-model="q.secret" placeholder="filter position..." />
<table>
<tr ng-repeat="record in (filteredItems = ( body | filter:q:containsComparator ) ) track by record.positionId" ng-class="rowClass(record)">
<td>....</td>
<td>....</td>
<td>....</td>
<td>....</td>
</tr>
</table>
Thanks
I don't think that filter is necessary in this case. You can use simple ng-repeat and ng-class directive for example
<tr ng-repeat="record in allrecords" ng-class="{'containscmp': isContainsComparator(record)}">
<td>....</td>
<td>....</td>
<td>....</td>
</tr>
where $scope.isContainsCoparator(record) function returns true if the record contains user's input

Avoid unnecessary evaluation of bound values in Angular.js

Have an angular.js directive that renders as a table. Most of the time, the table is small, so performance is not an issue.
But sometimes, the table has many rows (e.g. thousands), so rendering every row is expensive, as each bound value appears to be evaluated twice, and there are a lot of bound values. And Angular seems to evaluate this table a lot, only to find that all of the values in it are unchanged and thus need not be rerendered, paralyzing the application needlessly.
For instance, the entire table appears to be re-revaluated when the value of $scope.showMenu changes on mouseenter / mouseleave.
Is there a way to tell Angular that the entire table is dependent on some other value, say, $scope.checksum thus if that doesn't change, then the entire table doesn't change?
<div class="header" ng-mouseenter="showMenu=true" ng-mouseleave="showMenu=false">
<!-- show dropdown menu only when hovering over the header -->
<span ng-if="showMenu" class="menu dropdown" > ... menu content goes here...</span>
<h2>{{getTitle()}}</h2>
<p>{{description}}</p>
</div>
<table>
<tr ng-repeat="key in rowKeys">
<td title="{{getRowItem(key)|pretty">{{getRowItem(key)|abbreviated}}</td>
<td>{{getRowValue(key)|number</td>
</tr>
enter code here
</tr>
</table>
If you're using Angular 1.3 and the data in your table is not updated in other moment you must try bind once.
<tr ng-repeat="key in ::rowKeys">
<td>{{::key}}</td>
</tr>
Also ng-mouseenter and ng-mouseleave generate more $watchers, I recommend you use CSS rules to make this effect in your menu.

Categories