This is my code:
<div ng-repeat="cat in categs | filter:searchText">
<div><h1 id="{{cat.id}}">{{cat.title}}</h1></div>
<table>
<tbody>
<tr ng-repeat-start="subcat in cat.data | filter:searchText">
<th><h2 id="{{cat.id}}_{{subcat.id}}">{{subcat.title}}</h2></th>
</tr>
<tr ng-repeat-start="subsubcat in subcat.data | filter:searchText">
<td><h3 id="{{cat.id}}_{{subcat.id}}_{{subsubcat.id}}">{{subsubcat.title}}</h3></td>
</tr>
<tr>
<th>Nombre</th>
<th>Descripcion</th>
<th>Enlace</th>
</tr>
<tr ng-repeat-end ng-repeat="item in subsubcat.data | filter:searchText">
<td>{{item.name}}</td>
<td>{{item.about}}</td>
<td>{{item.urltext}}</td>
</tr>
<tr ng-repeat-end>
<td></td>
</tr>
</tbody>
</table>
</div>
and the current filtering isn't working for what I want to do, that is:
If the title of h1,h2 or h3 matches searchText, then show everything nested inside (don't filter anything inside).
But if neither h1,h2 or h3 matches searchText but what's in the last ng-repeat-start matches something, filter only what matched.
To explain myself better, here is an example:
Vehicles
Cars
BMW
item1: green
item2: red
item3: black
Toyota
Bikes
If searchText is:
vehicles : it shows everything.
cars : it shows vehicles header and cars header(and everything under) but doesn't show bikes (unless the the text "cars" appears in some subheader inside bikes or in some item)
black : only shows Vehicles, Cars and BMW headers and only item3.
The problem of the current code is that, if I remove the filter from the last ng-repeat-start it does what I want to do in the cars example but doesn't work for the black example.
Related
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 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'">
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>
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.