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'">
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.
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>
I got a problem on getting data from ng-repeat.
<tr ng-repeat="x in records">
<td>{{x.id}}</td>
<td>{{x.title}}</td>
<td>{{x.year}}</td>
<td>{{x.note}}</td>
</tr>
The {{x.id}} is the tt0013158 I want to get from the JSON.
Here is the JSON:
{"result":{
"tt0013158":{
"note":"",
"title":"The Frozen North",
"year":"1922"
},
"tt1605783":{
"note":"",
"title":"Midnight in Paris",
"year":"2011"
}
}}
I can get the note, title and year correctly. But how can I get the id (such as tt0013158) from the JSON?
There is no notion in javascript (or angular) that tt0013158 in the sample above would be the object's id. It's just a key in a map.
I believe this should do the trick:
<tr ng-repeat="(key, x) in records.result">
<td>{{key}}</td>
<td>{{x.title}}</td>
<td>{{x.year}}</td>
<td>{{x.note}}</td>
</tr>
you need to use (key,value) syntax :
<tr ng-repeat="(key, value) in data in records.result">
<td>{{key}}</td>
<td>{{value.id}}</td>
<td>{{value.title}}</td>
<td>{{value.year}}</td>
<td>{{value.note}}</td>
</tr>
You can use following approach to iterate through ng-repeat
<tr ng-repeat="item in records">
<td>{{item.id}}</td>
<td>{{item.note}}</td>
<td>{{item.title}}</td>
<td>{{item.year}}</td>
</tr>
at the moment I have list of events with a pagination on the bottom of the list. That works well, but now I want to add a addintional pagination on the to of the list. When I now change the pagination on the bottom the pagination on the top is not updated.
My working code is:
<tbody>
<tr dir-paginate="event in events | orderBy:['id', 't']:true | itemsPerPage: dirPaginate.pageSize" current-page="dirPaginate.currentPage">
<td><i class="{{ ::(event.el | eventtype).icon }}" tooltip="{{ ::(event.el | eventtype).tooltip }}"></i></td>
<td class="hidden-xs">{{::event.nr}}</td>
<td><span ng-bind-html="::('' + event.tg | eventMessage:event.d:'html')"></span>
<span class="visible-xs"> ({{::event.nr}})</span>
</td>
<td>{{ ::(event.t * 1000 | date:'mediumDate')}} <span class="visible-xs">{{ ::(event.t * 1000 | date:'mediumTime')}}</span></td>
<td class="hidden-xs">{{ ::(event.t * 1000 | date:'mediumTime')}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="paginationContainer"><dir-pagination-controls></dir-pagination-controls></td>
</tr>
</tfoot>
How can I uptate both paginations when one of them is changed?
Download dirPagination.js from here. .
Now include dirPagination.js to your page.
Add angularUtils.directives.dirPagination in your module like this
var app = angular.module("myApp",
['angularUtils.directives.dirPagination']);
4.we use dir-paginate directive for pagination add dir-paginate in tr tag
<tr dir-paginate="event in events|orderBy:['id', 't']:true |
itemsPerPage: dirPaginate.pageSize">
5.Add below given code on upper and lower side of your grid .it will automatically update page no. in both pagination controls.
<dir-pagination-controls
max-size="5"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
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