I try make table with pagination and filter using angular. I found nice pagination example (of course I didn't "ctrl+c, ctrl+v), but I have one problem. I use ng-repeat with slice but if I would make | filter this doesn't work properly, because filtered items didn't change pages. For example if item is on second page and I filter and is only one stiil stay on second page against go to first. Look on code and please help me make working filter
http://embed.plnkr.co/eheFSh/
At this case you should apply filter at first and only then pagination, i.e. slice:
name: <input type='text' ng-model='searchName'/>
id: <input type='text' ng-model='searchId'/>
<tr ng-repeat="row in (data | filter : {name:searchName, id: searchId }).slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))">
<td>{{row.name}}</td>
<td>{{row.id}}</td>
</tr>
Related
I can't get the 'groupBy' working.
I have a data set returned from a $http factory. The data is passed to the $scope 'territoryReq' variable.
the data set looks like:
[{"Country":"Netherlands","Name":"firstName lastName","Phone":"+12345678","Mobile":"+987654321"},{"Country":"Netherlands","Name":"firstName2 lastName2","Phone":"+12345678","Mobile":"+987654321"}]
I have a simple 'dump' of the data by using:
<div>
<table ng-table="" class="table table-condensed table-bordered table-hover">
<tr class="ng-table-group" ng-repeat="entries in territoryReq">
<td>
{{entries.Country}}
</td>
<td>
{{entries.Name}}
</td>
<td>
{{entries.Phone}}
</td>
<td>
{{entries.Mobile}}
</td>
</tr>
</table>
</div>
This is all working. No problem.
Now I want to have the results grouped by Country. Preferably by being able to click on the country which then unhides the rows with the correct country.
I was looking at the example of example of ng-table with grouping
But I can't get it working for my data..
In the example they use e.g. group in $groups but I can't figure out where $groups come from?
Anyway, I hope someone can help me in the right direction...
thanks!
For straight up grouping, groupBy takes an object property as the parameter. It should be as simple as
<tr class="ng-table-group" ng-repeat="entries in territoryReq | groupBy: 'Country'">
But it sounds more like you want to filter the list based on criteria, like country.
I mocked this up to demonstrate what I think you're looking for. Please take a look and see if it helps... It has ordering via the table headers and filtering from a dynamic list of countries.
https://stackblitz.com/edit/angularjs-yvxdrd
I have several tables with data coming from json.The data is split into the two tables, based on some criteria.This causes the index to go off, and now the angular doesn't correctly know which row is odd or even.Thus, odd,even colors are messed up. Any ideas besides sorting and reindexing in the controller?
see fiddle
You can try using a filter, in your example, change:
ng-repeat="person in people" ng-show="person.categoryId==2"
to:
ng-repeat="person in people | filter: { categoryId: 2}"
Fiddle available here: http://jsfiddle.net/rm8q1gnm/
Try to use angular filter
Replace your code with following
<tr ng-repeat="person in people | filter: {categoryId:2}" ng-class-odd="'odd'" ng-class-even="'even'">
I have two array objects user and test. I am applying ng-repeat on the test and also put search filter it works for test object but not for the user object.
My code is
<label>Search</label>
<input ng-model="searchTest" type="text">
<div ng-repeat="t in list = (test | toArray | filter:searchTest | limitTo: maxLimit )">
<td ng-bind="user[t.candidate].name"></td>
<td ng-bind="user[t.candidate].place"></td>
<td ng-bind="t.name"></td>
I'm unable to search the test using candidate name and place.
Also, perhaps not related to the question directly, but it looks like your code has a inside a then 's - which is not good html. If you're going to do something like that, put the ng-repeat on a .
I'm wondering how I would use Angular's searchText filter search an array specified. Currently, I'm using an ng-repeat and filter:searchText based off of an input.
The issue is that the ng-repeat uses a slice of the full array. So it loops through 10 records of 100. I need it to search the full array instead of the dataset it uses.
<input ng-model="searchText" id="ldrSearch" class="form-control" placeholder="Search" name="Search" type="text">
<tr id="row%% $index %%" ng-click="toggleDetails($event,true)" ng-repeat-start="user in users | filter:searchText" class="leaderboardrow"> ... </tr>
I was able to solve this with the advice of #zeroflagL
If you filter the slice then you may currently have less than 10
entries, but you want to filter the whole data set and always have 10
entries displayed? With the entries and pages changing dynamically? In
that case I would use the whole array instead of a slice and add a
second (custom) filter to display only the current slice.
as well as this SO post.
The only difference is that with my "slice" i used variables to set the start and end.
<tr id="row%% $index %%" ng-click="toggleDetails($event,true)" ng-repeat-start="user in users | filter:searchText | page:start:end"> .. </td>
app.filter('page',function()
{
return function(arr,start,end)
{
return (arr || []).slice(start, end);
};
});
I am using angularjs, ng-repeat to fill the required data in the datagrid.
Something like this:
<input type="text" placeholder="Search" ng-model="query">
<tr ng-repeat="item in items | filter:query">
<td>{{item.someData}}</td>
<td>{{item.someOthrData}}</td>
</tr>
when I enter some query string to filter the rows in the datagrid, at the end when the rows are filtered I need a callback, to do some application specific stuff.
Kindly if anyone can suggests what will be the right way to do this.
Thanks.
Try to use $watch method of the scope which detects changes of the defined expression. For your case, you need to watch "items" like:
scope.$watch('items', function() {
console.log('Search key was entered');
});