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">
Related
Im comparing two object arrays and displaying them with those that have the same object checkbox checked. I now want to sort the list the with checkbox check to be first as a default state.
I also want to sort by clicking the header to sort by ascending order .
<div>header</div>
<div class="search" ng-repeat="items in products ">
<label >{{item.name}}</label>
<input type="checkbox" ng-model="item.checked"
ng-click="checked(item,productlist)"
ng-checked=" checked(item,productlist)">
</div>
I tried using orderBy:[‘-checked’,’item’]: true to sort the checked ones on top but its not working. Any ideas
A few problems here...
You have ng-repeat="items in products", but then you refer to item instead of items within this scope.
You have this checked() method that you're passing to ng-click and ng-checked. What exactly is this doing? You should never be using ng-checked in conjunction with ng-model - https://docs.angularjs.org/api/ng/directive/ngChecked
By passing '-checked' to orderBy, items will be ordered by their checked value in reverse, i.e. they will be ordered false first, true last. Then you're passing true as the reverse parameter to orderBy, so the list will be reversed again. You're reversing the ordering twice unnecessarily - https://docs.angularjs.org/api/ng/filter/orderBy
This might work better...
<div>header</div>
<div class="search" ng-repeat="item in products | orderBy: 'checked'">
<label>{{item.name}}</label>
<input type="checkbox" ng-model="item.checked">
</div>
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 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'm trying to filter some list items based on the value of a boolean property, but no matter what I do the entire list is always displayed. A few of the the things I've tried have been so broken that nothing displays, but that's neither here nor there. I can't get my filtering working as desired:
$scope.attendees = [
{"firstname":"Steve", "lastname":"Jobs", "arrived":true, "id":1}
,{"firstname":"Michelle", "lastname":"Jobs", "arrived":false, "id":2}
,{"firstname":"Adam", "lastname":"Smith", "arrived":true, "id":3}
,{"firstname":"Megan", "lastname":"Smith", "arrived":false, "id":4}
,{"firstname":"Dylan", "lastname":"Smith", "arrived":false, "id":5}
,{"firstname":"Ethan", "lastname":"Smith", "arrived":false, "id":6}
];
Using the following ng-repeat filtering:
<ul>
<li ng-repeat="person in attendees track by person.id | filter:arrived:'false'">
{{person.lastname}}, {{person.firstname}}
</li>
</ul>
I feel like I've tried every permutation that I can find referenced, most of which came from various StackOverflow search results:
filter:'arrived'
filter:arrived
filter:'person.arrived'
filter:person.arrived
filter:{arrived:true}
filter:{arrived:'true'}
filter:{person.arrived:true}
filter:{person.arrived:'true'}
I've also tried creating a custom filter function:
$scope.isArrived = function(item) {
return item.arrived;
};
And applying it thusly:
filter:isArrived
filter:'isArrived'
filter:{isArrived(person)}
filter:isArrived(person)
filter:'isArrived(person)'
None of these seems to work. What am I missing?
Here's a plnkr that demonstrates my problem.
The track by needs to be at the end of the expression:
<li ng-repeat="person in attendees | filter: {arrived: false } track by person.id">
#Gruff's answer is right, but just to give an answer from an official source:
From the Angular ng-repeat docs:
Note: track by must always be the last expression:
<div ng-repeat="model in collection | orderBy: 'id' as filtered_result track by model.id">
{{model.name}}
</div>
It also appear on the "Arguments" part of the docs:
Note that the tracking expression must come last, after any filters,
and the alias expression.
So i need to know the extras of a car than a user wants to include in his preferences.
I'm trying to create input checkboxes from an array obtained by an ajax request and generate the inputs by ng-repeat. The major objective is to know the checkboxes selected by the user. I'd like that my approach to be create an auxiliar array which contains the selected ones, but i don't know how to set a unique ng-model to every item in the ng-repeat iteration so i can know the list of selected items. I guess there is something left in my knowlege of angular. Here is what i have for now..
In the controller...
$http.get('/ajax/ajax_get_extras/'+$scope.car.version+'/false').success(function(data) {
$scope.extras = data;
});
$scope.addExtra = function(){ // ... manage the auxiliar array }
In the html ...
<div ng-controller="Controller">
<form novalidate class="simple-form">
<span ng-repeat="extra in extras">
<input type="checkbox" ng-model="extra.id" ng-change="addExtra()" name="extra_{{extra.id}}" >{{extra.name}} - <strong>{{extra.real_price | onlynumber | currency}}</strong>
</span>
</form>
</div>
And i'm stuck since the extra.id doesnt transform to the real extra.id and stays as a string "extra.id" >_<
I tried extra_{{extra.id}}, extra.id, {{extra.id}}, $index as posibles ng-model and none works.
In AngularJS 1.1.5 there is "track by" that you can use in ngRepeat.
So you can:
<input type="checkbox" ng-repeat="e in extra track by $index" ng-model="extra[$index]">
Here is a example: http://plnkr.co/edit/6lNo6R5EPsNGHUU6ufTE?p=preview