I have a view that manages school's tests in a period (trimester or semester). Each semester can have many tests of type normal but only one of type examen.
I have made a script in jsFiddle that shows the behavior I am looking for https://jsfiddle.net/dfLf9zkm/.
The difference is that in the ng-repeat I have a ng-controller over each test so every time I called the ng-method it only affects the row I am on and not the rest. Something like
<div ng-app="app" ng-controller="Controller">
<table>
<tr>
<th>Type</th>
<th>Ponderation</th>
</tr>
<tr ng-repeat="test in tests track by test.id" ng-controller="TestRow">
<td><select ng-model="test.type" ng-options="type.id as type.type disable when type.id == 2 && hasExam && idExam!=test.id for type in types" ng-change="checkTests()"></select>
</td>
<td>{{test.ponderation}}%</td>
</tr>
</table>
</div>
If I change the value of $scope.hasExam with a method inside TestRow controller it only affect that row and not the rest. How can I do it?
I finally decided to leave everything in one controller and that fixed everything up
Related
We are building an application to show a table with timetable data.
On the interface the user can set different filters.
I could use a data-grid which would speed up about everything.
I could use a table without grouping and use some sort of lazy fetching which would speed things up.
However we like the layout as is.
The consequence is that the watches are way over 2000 and we are experiencing bottlenecks. It is not that we show hundredths of rows.
How can we make this a bit more performant.
I tried track by, which didn't improve a thing. I tried bind-once but that didn't work either. (Honestly I have no clue how to make it work with key,value objects).
One performance trick might be changing the filters, move and chain them in the controller?
As you also can see, we re-use the same filters a lot, however this is necessary for the group by.
I also haven't seen any lazy-fetching mechanism which works with this kind of custom table / group by.
Hopefully you can help me to point me in the right direction, since I really kinda like the current layout.
The dataset is being displayed in a table and is grouped by date.
Example output:
hrefDateA | hrefDateB | hrefDateC | hrefDateD
DateA
RowA with columns
RowB with columns
RowC with columns
DateB
RowD with columns
RowE with columns
DateC
RowA with columns
RowB with columns
RowC with columns
....
<div ng-if="includeDesktopTemplate" ng-show="whateverdata.length > 0">
<div>
Jump to:
<a ng-href="#tableheader{{$index}}" ng-repeat="(key, value) in whateverdata | filter:filterA() | filter:filterB() | filter:filterC() | groupBy: 'someproperty'" class="someclass">
{{key}}
</a>
</div>
<hr />
<table>
<thead>
<tr>
<th class="timetablerow">HeaderA</th>
<th class="timetablerow">HeaderB</th>
<th class="timetablerow">HeaderC</th>
<th class="timetablerow">HeaderD</th>
<th class="timetablerow">HeaderE</th>
<th class="timetablerow">HeaderF</th>
</tr>
</thead>
<tbody ng-repeat="(key, value) in whateverdata | filter:filterA() | filter:filterB() | filter:filterC() | groupBy: 'someproperty'">
<tr>
<td colspan="6" class="desktoptablegroupby" id="tableheader{{$index}}">
{{key}}
</td>
</tr>
<tr>
<td colspan="6">
<hr class="redbackground" />
</td>
</tr>
<tr ng-repeat="row in value | filter:filterA() | filter:filterB() | filter:filterC()" ng-class-odd="'odd'" ng-class-even="'even'">
<td class="timetablerow">
{{row.propertyA}}
</td>
<td class="timetablerow">
{{row.propertyB}}
</td>
<td class="timetablerow">
{{row.propertyC}} - {{row.propertyD}}
</td>
<td class="timetablerow">
{{row.propertyD}}
</td>
<td class="timetablerow">
{{row.propertyE}}
</td>
<td class="timetablerow">
<div ng-show="{{row.propertyF}}">
<md-tooltip md-direction="{{tooltip.tipDirection}}">
{{row.propertyF}}
</md-tooltip>
<md-icon md-svg-src="~/Content/comment.svg">
</md-icon>
</div>
</td>
</tr>
</tbody>
</table>
<br /><br />
</div>
If I include the code below, watches can go from 3k to 6k
<div ng-show="{{row.propertyF}}">
<md-tooltip md-direction="{{tooltip.tipDirection}}">
{{row.propertyF}}
</md-tooltip>
<md-icon md-svg-src="~/Content/comment.svg">
</md-icon>
</div>
Regarding the code above. One column would show an icon with a tooltip which contains the value of an extra field of the dataset, only when the field contains data. But this also gives issues when the filters are being used (so redraw of screen), since other rows are showing the tooltip then, even when the value of the field of the specific row does not contain a value.(DOM/update/filter issue?)
This is a limitation by the way AngularJS handles change detection and rendering. There's really no easy solution - with emphasis on easy. What I've done on several occasions is use a technique often refered to as virtual-scroll/virtual-repeat. What it basically does is that it only renders the elements that can be seen in the viewport, but adds offsets to the top and bottom of the list/table to keep the scrollbar a constant size, regardless of how many elements are actually rendered. Then whenever you scroll, the elements that pop into view is seamlessly rendered before they become visible. This gives the illusion that it's a single long list/table, when it really only renders what is visible.
There are many libraries that implement this technique. I've personally got experience with the one called angular-vs-repeat but you should take a look at a few and evaluation which fits best your use case. I've also on one occasion implemented my own virtual scroll and it was certainly doable (my usecase in that scenario was that I needed virtual scroll to work both vertically and horizontally).
What I want to do is to create 2 angular tables where I display tasks. In the first table I want to show all tasks which are not assigned to user and in the second tab I want to show all tasks which are assigned to user
UsersDTO is array, I may have more users assigned to the same task.
My html code looks like this. This is tab where I got all tasks with assigned user to it. I am not pretty sure why this is working, but I assume it somehow looks into property and check if there is anything.
<tbody>
<tr ng-repeat="task in project.ProjectTasksDTO | filter: {UsersDTO: {}}">
<td>{{task.Id}}</td>
<td>{{task.Title}}</td>
<td>{{task.Text}}</td>
<td>{{task.Description}}</td>
<td><p ng-repeat="user in task.UsersDTO">{{user.UserName}}</p></td>
<td>{{task.Status}}</td>
<td>{{task.CreatedBy}}</td>
<td><button class="btn-info" ng-click="editUser(user);">Profile</button></td>
</tr>
</tbody>
Is there a way how to tell to filter in ng-repeat that UsersDTO is null or empty, something like in code below.
<tbody>
<tr ng-repeat="task in project.ProjectTasksDTO | filter: {UsersDTO: {null}}">
<td>{{task.Id}}</td>
<td>{{task.Title}}</td>
<td>{{task.Text}}</td>
<td>{{task.Description}}</td>
<td><p ng-repeat="user in task.UsersDTO">{{user.UserName}}</p></td>
<td>{{task.Status}}</td>
<td>{{task.CreatedBy}}</td>
<td><button class="btn-info" ng-click="editUser(user);">Profile</button></td>
</tr>
</tbody>
Hi you can do it this way without a the need for a function.
<div ng-repeat="task in project.ProjectTasksDTO | filter:{UsersDTO.length: 0}:true">
<div ng-repeat="task in project.ProjectTasksDTO | filter:{UsersDTO.length: 0}:false">
Altough keep in mind that the :true and :false notation is actually an angular specific shorthand notation and will be replaced with function(actual,expected) in a literal comparison to see if these match yes:true or no:false
Fidle
I want to verify the number of table rows in protractor, on a page in which tables of this type appear more than once. I've been trying to use the first-of-type selector, but it seems to be catching both tables because they do not appear side by side.
For example, given this HTML:
<div>
<table class="foo">
<tr>
<th>First row</th>
<th>Second row</th>
<th>Third row</th>
<th>Fourth row</th>
</tr>
</table>
</div>
<div>
<table class="foo">
<tr>
<th>First row</th>
<th>Second row</th>
<th>Third row</th>
<th>Fourth row</th>
</tr>
</table>
</div>
And this protractor code:
element.all(by.css('table:first-of-type tr:first-of-type th')).then(function (elements) {
expect(elements.length).toBe(4);
});
Protractor is failing on the grounds that there are 8 elements and not 4. It seems the table:first-of-type selector is catching both elements, since they're both the first children of their parent div components. My project is structured in such a way that it's better not to add individual classes to each wrapping div.
Is there a way to get the first element found in Protractor and then search its child elements?
I have not used :first-of-type as a css selector in Protractor; however, you could get the first table with all th's and then check to see if the count is 4.
expect(element.all(by.css('table')).first().all(by.css('th')).count()).toBe(4);
You can certainly do it the way #cnishina suggested (and I would actually prefer his approach over making a long CSS selector), but if you want to continue using a single CSS selector for this problem, you should also apply the first-of-type (or first-child) to the parent div:
div:first-of-type > table:first-of-type > tr:first-of-type > th
I've also added the > to enforce the direct parent-child relationships.
I have a simple table row.
The row is generated by below code.
<tr ng-init="cacheChanged">
<td>Expiration Period</td>
<td ng-repeat="system in tableData.regions[0].systems">
<input type="text" ng-model="system.cacheDuration" ng-change="cacheChanged=true">
<span>h</span>
</td>
<td>
<button type="button" ng-click="saveCache()" ng-disabled="!cacheChanged">Save</button>
</td>
</tr>
When any of the four values changed, the save button is supposed to be enabled. However, it is still disabled all the time. Anyone knows why? Thanks in advance!
In your case you should use $parent.cacheChanged instead of cacheChanged variable. As ng-repeat does create child scope for each loop while rendering DOM. In short the cacheChanged variable inside ng-repeat is not same as that of cacheChanged used there on button.
Markup
<td ng-repeat="system in tableData.regions[0].systems">
<input type="text" ng-model="system.cacheDuration" ng-change="$parent.cacheChanged=true">
<span>h</span>
</td>
There is better way to go for it will be using Dot rule while defining ng-model, look at this detailed answer here.
I'm attempting to use ng-repeat in a couple of elements on my page.
For some reason it's showing each of the n elements n times and I cannot figure out why.
My array looks something like this:
$scope.fieldNames = ["Last_Name","First_Name","Email","Home_Phone","Cell_Phone"];
I have a select box that is filling n^2 times (I have tried using ng-options but cannot get it to work with the array):
<td>
<select ng-model="currentField" style="width: 100%">
<option ng-repeat="field in fieldNames">{{field}}</option>
</select>
<td>
Additionally this happens with the header row of my table.
But not with the member rows or the cells contained within.
<table class = "main-table">
<thead>
<tr>
<th ng-repeat = "field in fieldNames">{{field}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat = "member in members" >
<td ng-repeat = "field in fieldNames">{{member[field]}}</td>
</tr>
</tbody>
</table>
If someone could please explain to me why this is happening and how to fix it I would be grateful. A working example of the ng-options would also be appreciated.
Thanks in advance for your time.
To work with a list of strings in ng-options, you need the comprehension expression looks like this
<select ng-model="currentField" ng-options="field for field in fieldNames"></select>
DEMO
So it turns out that the reason each item was repeating n times is that both my page and the layout template I was using both had
<script type = "text/javascript" src = https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"> </script>
As a result angular was apparently loading twice and running the ng-repeat on the ng-repeat, hence all the additional entries.