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);
};
});
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 have nested data objects that I want to show to a user based on the filters they have selected. I am a bit new to angular but finding how to solve this problem has taken me a while now and not really got anything good.
<tr ng-repeat="stockItem in stock | filter : stockFilter ">
<td>{{stockItem.dateCreated | date:'dd/MM/yyyy (HH:mm)'}}</td>
<td>{{stockItem.sku}}</td>
<td>
<select class="form-control">
<option ng-repeat="supplierOrderStock in stockItem.supplierStock | filter : supplierSelectionFilter"
value="{{supplierOrderStock.supplierId}}" >
£{{supplierOrderStock.price}}
</option>
</select>
</td>
</tr>
I have check boxes on the top of the page and when you check or uncheck them the drop downs get updated with the filtered data.
Problem is that the SELECTED drop down is random, usually the first one that was selected on initial render.
I just want the cheapest value to be shown in the drop downs and the way the data is sorted that is always going to be the first select option.
How do I set the drop down selected value, for each nested repeat to be either the cheapest one or just simply the always the first drop down??
You can try to use the NgOption directive instead:
<div class="col col-50">
<span>Orientation</span> <br>
<select name="orientation" id="orientation" ng-options="option.label for option in data.filters.basics.orientations track by option.id" ng-model="data.selectedOrientation">
</select>
</div>
In my case the data.selectedOrientation is the default ng-model that i had to setup in the controller:
$scope.data.selectedOrientation = $scope.data.filters.basics.orientations[($scope.data.selections.basics.orientations[0]-1)]
If you dont want to change your dom element jsut add a ng-model to it
<tr ng-repeat="stockItem in stock | filter : stockFilter ">
<td>{{stockItem.dateCreated | date:'dd/MM/yyyy (HH:mm)'}}</td>
<td>{{stockItem.sku}}</td>
<td>
<select class="form-control">
<option ng-repeat="supplierOrderStock in stockItem.supplierStock | filter : supplierSelectionFilter" ng-modal="yourModelForThisDom"
value="{{supplierOrderStock.supplierId}}" >
£{{supplierOrderStock.price}}
</option>
</select>
</td>
</tr>
After learning a bit more I finally realised that it will be much easier if all the data is stored and filtered on the Model and collections within.
<select class="form-control" ng-show="stockItem.supplierStockFiltered.length > 0"
ng-model="stockItem.selectedSupplier"
ng-options="option as getSupplierDropDownText(option) for option in stockItem.supplierStockFiltered track by option.price"></select>
<span ng-show="stockItem.supplierStockFiltered.length == 0 || stockPackItem.supplierStockFiltered == null ">
No Stock
</span>
So when the data loads or when ever I click on any check boxes, I just use angular.forEach( in the controller to set the Selected Item based on what ever I filtered out. The actual two fields I am binding too are not contained int he the data that comes back from the server. But in JS you can just dynamically add those fields before the HTML binds and it works great!
The HTML is much cleaner and I have much better control over the models.
End of the day I had to go do this any way because now I need to save all the selected drop down values... and now because the Selected item is bound to the model.. its easy peasy. I just serialise the models and use the data on the server.
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 making a small application that sorts a list of points that users have similar to a game leaderboard. I've set up an ng-repeat over an array of objects and an ng-show on different option selects to show a span within the list. The spans show different point scores.
I've added a orderBy filter on the ng-repeat so the list is filtered from largest to smallest. For instance, when the option select of 'Threads Created' is chosen, then the scores for 'Post Read' and 'Posts Replied' are hidden and the list is sorted by the number of Threads Created (largest to smallest).
It works for two of the option values but not the third. Any idea why?
<tr ng-repeat="user in users | orderBy:['-created','-read','-replied']">
<td> {{user.index}} </td>
<td> {{user.firstName}} {{user.lastName}}</td>
<td>
<span ng-show='discussionsSelect == "created"'>{{ user.created }}</span>
<span ng-show='discussionsSelect == "read"'>{{ user.read }}</span>
<span ng-show='discussionsSelect == "replied"'>{{ user.replied }}</span>
</td>
</tr>
If I'm understanding this correctly you are not doing this properly. Your list will only ever be sorted by 'created'. The second value of the orderBy clause will only come into play if two objects with the same 'created' are found. Likewise for the third value in your orderBy clause. It will only ever be used if two items have the same 'created' and then the same 'read' value.
You're going to need to make orderBy a variable that gets set based on the pulldown chosen. You can set it to the name of the variable that your select is bound to. I think that is discussionsSelect in your plnkr.
<tr ng-repeat="user in users | discussionsSelect">
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">