My question is - I think - pretty simple.
I have a table, a classic one. In this table, I want to display values of two arrays named networks and channels.
Each network in networks could contain channels but not all.
What I want is to display all the networks and their related channels.
In DIV or TD in TR it's simple but I can't do this with multiple TR.
Example :
<tr ng-repeat="network in networks">
<td>{{network.Name}}</td>
<td ng-repeat="channel in channels | filter: { networkId: network.networkId}">{{channel.Name}}</td>
</tr>
Works like a charm!
But I'm searching thing like this :
<tr ng-repeat="network in networks">
<td>{{network.Name}}</td>
<td ng-repeat="month in year">{{month.Name}}</td>
</tr>
<tr ng-repeat="channel in channels | filter: { networkId: network.networkId}">
<td>{{channel.Name}}</td>
<td ng-repeat="month in year">{{month.Name}}</td>
</tr>
But I know that is not the good code to do this :)
Someone know how to do that ?
I don't want to change the TABLE by DIV.
Kind regards !
Each ng-repeat has its own scope so your network is not available on the second TR repeat.
If you really want to stick with table, you can create a table inside your tr like this:
<tr ng-repeat="network in networks">
<td>{{network.Name}}</td>
<td ng-repeat="month in year">{{month.Name}}</td>
<td>
<table>
<tr ng-repeat="channel in channels | filter: { networkId: network.networkId}">
<td>{{channel.Name}}</td>
</tr>
</table>
</td>
</tr>
Related
I'm trying for hours to figure out why is my md-data-table only sorting the current page.
The same thing is happening on the search filter.
Can someone say why is it doing this and how can i fix it?
<input ng-model="searchInterview">
<md-table-container>
<table md-table="" md-progress="promise" ng-model="selected">
<thead md-head md-order="sort.order">
<tr md-row>
<th md-column md-order-by="dataapplicazione"><span>Data app</span></th>
<th md-column md-order-by="nomecognome"><span>Nome e cognome</span></th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="item in main.interviewsList | limitTo: sort.limit : (sort.page -1) * sort.limit | orderBy:sort.order | filter:searchInterview ">
<td md-cell>{{ item.dataapplicazione | date}}</td>
<td md-cell>{{ item.nomecognome }}</td>
</tbody>
</table>
</md-table-container>
<md-table-pagination md-limit="sort.limit" md-limit-options="limitOptions" md-page="sort.page" md-total="{{main.interviewsList.length}}" md-on-paginate="promiseInterviews" md-page-select></md-table-pagination>
Sorting Desc
Sorting Asc
Maybe change the order of the filters?
Also; this is in the documentationof mg-data-table:
My Pagination Isn't Working?!
Make sure you pass md-page, md-limit, and md-total to the directive and that they are finite numbers.
Pages are not zero indexed. The directive will assume pages start at one. If your query language expects pages to be zero indexed then just subtract one before making the query.
I have a class structure as follows
data
TeamList[]
PlayerList[]
So what I have is a list inside a list. I want to be able to filter the TeamList with the value from a dropdown value, and iterate over the items in Player list as Rows. I am confident on the 2nd part with the following.
<table style="border: 1px ">
<tbody>
<tr>
<td>Player Name</td>
<td>Position</td>
<td>Projected Points</td>
</tr>
<tr ng:repeat="e in data.Team.Roster | orderBy: '-ProjectedPoints' " ">
<td>{{e.Name}}</td>
<td>{{e.Position.Abbreviation}}</td>
<td>{{e.ProjectedPoints}}</td>
</tr>
</tbody>
</table>
But I am not sure how to get the "Team" in the above case to be correct. Is this something you can do in Angular, or are you better doing it on the JS side and pass the correct team back to the $scope?
I am trying to add filter in one of my columns that sorts by name.
<tbody>
<tr ng-repeat="setting in detailsExample.versionExample.settings | orderBy:'setting.name'">
<td>{{setting.name}}</td>
<td>{{setting.type}}</td>
</tr>
</tbody>
Am I on the right track here using orderBy:'setting.name' ?
Just name is enough in the filter. it is been well explained here
https://docs.angularjs.org/api/ng/filter/orderBy
so your answer will be
<tbody>
<tr ng-repeat="setting in detailsExample.versionExample.settings | orderBy:'name'">
<td>{{setting.name}}</td>
<td>{{setting.type}}</td>
</tr>
</tbody>
It should be 'name' only, also you could have 3rd option which would say reverse order of an array then you could set orderBy:'name': true
<tr ng-repeat="setting in detailsExample.versionExample.settings | orderBy:'name'">
Folks I am using a simple ng-repeat directive to display data in table.
However when the directive renders, the first column takes up all the space and dis-figures the table.
Take a look at the plnkr here :
http://plnkr.co/edit/Hahh4uyQ130zOS8noC3D
please focus on the file layout.html
<table>
<thead>
<tr ng-repeat="element in header" class="header-cells" style="width:{{element.width}}px">
<th drop-down-sort-menu>{{element.column}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="element in body">
<td ng-repeat="h in header" row="{{$parent.$index}}" col="{{$index}}" style="width:{{element.width}}px">{{element[h.column]}}
</td>
</tr>
</tbody>
</table>
I am sure it's something minor. any clues
I believe you problem is that for the headers, you have 4 TRs with only one TH, as opposed to one TR with 4 THs. For this reason, the cells on your headers are not matching the cells on your body.
Do the first ng-repeat at the TH level.
Give it a try and let me know.
Since examples always tell more then just words here is what I would like to do in another language
<tr>
<c:forEach items="${items}" var="item">
<td>...</td>
<td>...</td>
<td>...</td>
<c:if test="${item.showWarning}">
</tr><tr><td colspan="3">${item.warning}</td>
</c:if>
</tr>
So this will loop over a set of items and show some properties of these items. If there is a warning, a new row will be added underneath the current row in which the warning will be shown. However, how can I do this in angularJs? If I put a ng-repeat on the tr, it will stop at the first end tag of tr. I have read on some other threads that this is not very easily done, but how can it be done? And yes, I really do want to use a table. Here is my contrived example with angularjs which is obviously not working as I would like it to. Any pointers how this can be done?
JSBin example with tr-ng-repeat
Currently (1.0.7/1.1.5) you can't output data outside the ng-repeat, but version 1.2(see youtube video AngularJS 1.2 and Beyond at 17:30) will bring the following syntax(adapted to your example):
<tr ng-repeat-start="item in items">
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr ng-repeat-end ng-show="item.showWarning">
<td colspan="3">{{item.warning}}</td>
</tr>
The idea is that whatever is between -start and -end will be repeated including the -end element.
One solution that I can think of is having multiple tbody tags within the same table. Here is a discussion on the use of multiple tbody tags within the same table.
So, for your issue, you could have the following setup:
<table ng-controller="ItemController">
<thead>
<th>Name</th>
<th>Description</th>
<th>warning?</th>
</thead>
<tbody ng-repeat="item in items">
<tr>
<td>{{item.name}}</td>
<td>{{item.description}}</td>
<td>{{item.warning}}</td>
</tr>
<tr ng-show="item.warning">
<td colspan="3" style="text-align: center">Warning !!!</td>
</tr>
</tbody>
</table>
Repeat the table body as many times as there are entries for the table and within it have two rows - one to actually display the row entry and one to be displayed conditionally.
You can repeat over the tbody
<tbody ng-repeat="item in items">
<tr>
<td>{{item.name}}</td>
<td>{{item.description}}</td>
<td>{{item.warning}}</td>
</tr>
<tr ng-show="item.warning">
<td colspan="3">Warning !!!</td>
</tr>
</tbody>
Also you do not need to wrap the ng-show expression in {{}}, you can just use item.warning