I use angular-filter in my project to sort the output objects by page the problem is when I use syntax like this:
<ul class="catalog-list"
ng-repeat="(key, value) in list | groupBy: 'styl' | toArray | orderBy:'page'">
{{key}}
<li ng-repeat="dziecko in value | filter:search | bookmark:search"
ng-class="{active:isActiveTab(dziecko)}"
ng-click="openItem(dziecko)">
{{dziecko.rodzina}}
<b>{{dziecko.page}}</b>
</li>
</ul>
Angular converts 'styl' properties ['nowoczesny','klasyczny'..] to numbers. Sorting works fine but I want to obtain names instead of numbers.
groupBy return an object, and orderBy expect array as an argument, so that's the reason you should use toArray filter.
toArray work like that:
Usage: object | toArray: addKey[optional]
if addKey set to true, the filter also attaches a new property $key to the value containing the original key that was used in the object we are iterating over to reference the property
So, you can do something like this example, or take a look on the jsbin
JS:
$scope.groups = [
{ category: 'alpha', id: 2 },
{ category: 'beta', id: 3 },
{ category: 'gamma', id: 0 },
{ category: 'alpha', id: 4 },
{ category: 'beta', id: 5 },
{ category: 'gamma', id: 1 }
];
HTML:
<ul ng-repeat="group in groups | groupBy:'category' | toArray:true | orderBy:min">
<!-- print the group name -->
<li>{{ group.$key }}</li>
<!-- iterate over the group members and order each group by id -->
<li ng-repeat="item in group | orderBy:'id'">
{{ item }}
</li>
</ul>
RESULT:
alpha
{"category":"alpha","id":2}
{"category":"alpha","id":4}
beta
{"category":"beta","id":3}
{"category":"beta","id":5}
gamma
{"category":"gamma","id":0}
{"category":"gamma","id":1}
An array has no named keys. It has integers as position. So don't use toArray.
Related
I have an object as
{
key1: value1,
key2: value2
}
How will repeat this in ui-select-choices? I tried a few things but nothing worked as
<ui-select ng-model="selectedChoice" theme="select2">
<ui-select-match placeholder="{{'select_product' | translate}}" allow-clear="true">
<span ng-bind="$select.selected"></span>
</ui-select-match>
<ui-select-choices repeat="key as (key, value) in (productList | filter: $select.search)">
<span>{{::key}}</span>
</ui-select-choices>
</ui-select>
This should work:
<ui-select-choices repeat="product.key as (key, product) in productList | filter: {'value':$select.search}">
<span ng-bind-html="product.value"></span>
</ui-select-choices>
Angular UI Select iterates over objects kinda this way: during iterating for each pair (key, value) instead of accessing the value directly, an object (it's named product in my code above) is created that consists of two properties named key and value, where key is an actual key of the initial object, value is a value for the key. This object should be used to access a real value.
For example, for the following initial data object
{
key1: {
id: 1,
name: 'John'
},
key2: {
id: 2,
name: 'Alex'
}
}
on the first iteration such object will be created:
{
key: 'key1',
value: {
id: 1,
name: 'John'
}
}
For your data object, the following object will be created on the first iteration (product):
{
key: 'key1',
value: 'value1'
}
I have a list pulled from C#. I'll call it Teams. Teams has a few properties: Team Type, and Team Members (which is a subset list).
[
{
"team": {
"teamName": "The First Team",
"teamType": 1
}
},
{
"team": {
"teamName": "The Second Team",
"teamType": 2
}
},
{
"team": {
"teamName": "The Third Team",
"teamType": 2
}
}
]
My goal:
I'd like to have an ng-repeat where it I show the team type, and how many teams of that type there are, kind of like so:
<div>
<li ng-repeat="team in teams | groupBy: teamType>
Type: {{::teamType}} -- Count: {{::numberOfTeamsOfType}}
</li>
</div>
and it might look like this:
Type: 1 -- Count: 1
Type: 2 -- Count: 2
Using the angular-filter module var myApp = angular.module("myApp", ['angular.filter']); and given the object array structure you have provided, you can do this:
<li ng-repeat="(key, value) in teams | groupBy: 'team.teamType'">
Team Type: {{value[0].team.teamType}} -- Count: {{value.length}}
</li>
jsfiddle here
I'd like to be able to sort by whether a variable is true or false.
Let's say we have a variable like so:
groups = {
{ name: 'first', value: true },
{ name: 'second', value: false },
{ name: 'third', value: true },
{ name: 'fourth', value: false }
}
And we can loop through it like so:
<div ng-repeat="group in groups">
{{group.name}} {{group.value}}
</div>
Which will give you the following:
first true
second false
third true
fourth false
But if I wanted to sort by a boolean value then I could do this:
<div ng-repeat="group in groups | filter:{value:true}">
{{group.name}} {{group.value}}
</div>
<div ng-repeat="group in groups | filter:{value:false}">
{{group.name}} {{group.value}}
</div>
Which would give me the following output (which I want):
first true
third true
second false
fourth false
Is there a way to do this using orderBy or filter in a single ng-repeat?
orderBy accepts and sorts by booleans.
Order the repeated element by the the 'value' property of 'group':
ng-repeat="group in groups | orderBy: 'value'"
This will reverse the order:
ng-repeat="group in groups | orderBy: '-value'"
If you would like to also sort by the 'name' property of 'group':
ng-repeat="group in groups | orderBy: ['value','name']"
use variable name instead obeject
orderBy:'Event':false
you will get the desired output like -
first true
third true
second false
fourth false
I am trying to filter a list by a property that is set by a dropdown:
<select ng-model="filterItem" ng-options="item.name for item in filterOptions.stores">
</select>
This is the the data for the dropdown:
$scope.filterOptions = {
stores: [
{id : 2, name : 'Show All', rating: 6 },
{id : 3, name : 'Rating 5', rating: 5 },
{id : 4, name : 'Rating 4', rating: 4 },
{id : 5, name : 'Rating 3', rating: 3 },
{id : 6, name : 'Rating 2', rating: 2 },
{id : 7, name : 'Rating 1', rating: 1 }
]
};
The filter is actually not working properly through the rating property: it returns more that just the one selected property:
<li data-ng-repeat="item in data | filter:filterItem.rating" >
Name: {{item.name}} Price: {{item.price}} Rating: {{item.rating}}
</li>
How can I fix the filter here?
This is a plunkr:http://plnkr.co/edit/vAebEb?p=preview
Right now you are setting filterItem.rating as the filter, so you're setting a string as the filter. From docs (https://docs.angularjs.org/api/ng/filter/filter):
The string is used for matching against the contents of the array. All
strings or objects with string properties in array that match this
string will be returned. This also applies to nested object
properties. The predicate can be negated by prefixing the string with
!.
What this is doing is matching ANY property in your array with the value filterItem.rating; so product's with the number in their product name are also being matched.
Since you want the filter to ONLY apply to the rating property, you want to set an object like this:
<li data-ng-repeat="item in data | filter:{rating:filterItem.rating}" >
That will now filter properly, but Show All doesn't work properly since filterItem.rating is undefined when it's show all. Since we don't want the filter to apply when Show All is selected, you can check for the filterItem.rating property first:
<li data-ng-repeat="item in data | filter:filterItem.rating && {rating:filterItem.rating}" >
I've updated your Plunkr here: http://plnkr.co/edit/q5Ns8c6HN1eIGZANlI4s?p=preview
You need to make a couple of changes:
In your $scope.filterOptions.stores object: Remove the rating for Show All option like:
{id : 2, name : 'Show All'},
In your html where you are using filter:
<li data-ng-repeat="item in data | filter:filterItem.rating && {rating:filterItem.rating}">
Hope this helps.
I can't find a way to loop through my array of json objects with angular .
My array looks like that in firebug(Each series of objects have an index value.):
[[0], Object { idliste=0, id=1, photo="pot.jpg", plus...}, Object { idliste=0, id=3, photo="pot.jpg", plus...}]
[[1], Object { idliste=1, id=1, photo="pot.jpg", plus...}, Object { idliste=1, id=3, photo="pot.jpg", plus...}]
[[2], Object { idliste=2, id=1, photo="pot.jpg", plus...}, Object { idliste=2, id=3, photo="pot.jpg", plus...}]
It has been produced by this code :
var idListe = $scope.getIdListe();
$scope.listeCommandes[idListe]= new Array([idListe]);
for (i=0;i<$scope.panier.length;i++){
$scope.listeCommandes[idListe].push({
idliste:idListe,
id: $scope.panier[i].id,
photo: $scope.panier[i].photo,
nom: $scope.panier[i].nom,
quantite:$scope.panier[i].quantite,
prix: $scope.panier[i].prix,
heureajout:$scope.getHeure()
});
};
$scope.getIdListe = function(){
var idListe = $scope.listeCommandes.length;
return idListe;
};
And the html is :
<div ng-repeat="idliste in listeCommandes" >
<div ng-repeat="(nom, id) in idliste">
{{nom}} : {{id}}
</div>
</div>
It doesn't work. I really can't figure how to make it work, it means, simply print each objects, following the index number.
THank you if u got any idea. I've searched the forums but can't find any solution. Maybe it's the way i 've created an index that is wrong ?
finally answered my problem by adding an angular module called angular-filter "mentionned within this example:
http://jsbin.com/weyov/45/edit?html,js,output
Thank a lot for you help .
Now my code look like that :
var idListe = $scope.getIdListe();
for (i=0;i<$scope.panier.length;i++){
$scope.listeCommandes.push({
idliste:idListe,
id: $scope.panier[i].id,
photo: $scope.panier[i].photo,
nom: $scope.panier[i].nom,
quantite:$scope.panier[i].quantite,
prix: $scope.panier[i].prix,
heureajout:$scope.getHeure()
});
};
and the html :
<ul ng-repeat="(key, value) in listeCommandes | groupBy: 'idliste'">
Group name: {{ key }}
<li ng-repeat="article in value">
article: {{ article.nom}}
</li>
</ul>
then my orders are now all automtically grouped by ID in the html view :
Group name: 0
article: Pots Gris
article: Pot Vert
Group name: 2
article: Pot Bleu
article: Pot Vert
article: Pinceaux
Group name: 5
article: Pots Gris
article: Pot Vert
article: Pot Rouge
article: Pot Bleu