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 .
Related
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>
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 have an input of which the value should be used as a filter query:
<input type="text" ng-model="query" placeholder="Movie title">
and a repeat directive with a filter on a property of the repeated elements:
<tr ng-repeat="movie in movies | filter:{title: query}">
When I enter a value into the text box the results are filtered. When I delete the input value all movies are shown. So far so good. But when the page (or view) is loaded the first time the filter returns no elements and the table is empty. It seems to me that the filter either isn't properly called or with a wrong value. Any advice would be appreciated.
try this
<tr ng-repeat="movie in movies | filter:{title: query||'' }">
I think it is because query is undefined in pageload
I am attempting to filter a table based on the value of an input box.
I have it currently working on the HTML side, like so...
<tr ng-repeat="person in model.info | filter:inputFilter" ..... >
<td> {{ person.name }} </td>
<td> {{ person.height }} </td>
</tr>
<input class="filterBox" type="text" ng-model="inputFilter">
As said before, it works swell. It filters as I type, and is very quick and snappy.
In an effort to make the code reusable, I'd really like to be able to convert this into a Javascript function, but the syntax is escaping me. Yes, I've read the documents, but am not sure how I could just have it update in real time like it does through the HTML side.
Thanks :D
Austin
I have a ng-repeat with filters put as shown below before. For some reason it didnt work in the web server and i think its because of duplicate items not allowed in browser DOM so i had to put "track by item.id". Please see the code below.
<div ng-repeat="item in items | filter:search:date | filter:filterFrontPage track by item.id">
The only issue with above code is that items are not loaded by having "filterFrontPage" filter as well which filters a boolean value from an item. The whole thing works fine when i have it changed to the following:
<div ng-repeat="item in items | filter:search:date track by item.id">
Thus, using the above, how would i add one more filter to filter a boolean value in a variable. I cant seems to get this working by using "filter:search:date:{isActive:true}". Please let me know as to what can be done to get this working.
Update 1:
I have removed "date" as i used it long ago. "search" is for the following and that works fine.
<input class="form-control" type="text" placeholder="Search posts" ng-model="search.$" />
Ideally filterFrontPage is written to filter items by isActive variable true/false;
I think you need to use parentheses around the filtered collection, i.e.:
<div ng-repeat="item in (items | filter:search:date) track by item.id">