I have data which can take the following format:
var data =
{
0:[1:"a", 2:"b", 11:"c", 22:"d"],
1:[1:"e",2:"f",11:"g",22:"h"]
}
If I do the following:
<div ng-repeat="(key, value) in data">
<div ng-repeat="(innerKey, innerValue) in value">
{{innerKey}}
</div>
<br/>
</div>
This will give me:
1 11 2 22
1 11 2 22
since it is sorting by string comparison on the keys, not the numeric value of the key
What I really want is:
1 2 11 22
1 2 11 22
Any suggestions?
If you could restructure the data a little bit, you could try this. I removed the nested data to simplify the core issue.
http://jsfiddle.net/rsmclaug/BHF9C/
Also, the data as-is is not valid array syntax.
<div ng-repeat="item in data | orderBy:'key'">
{{item.key}} - {{item.value}}
</div>
$scope.data = [
{key: 1, value: "a"},
{key: 12, value: "c"},
{key: 2, value: "b"},
{key: 22, value:"d"}
];
Related
I want to know how to get value in array in *ngFor. First I use *ngFof to get item list. Second I use commonService.indexKey$.getValue() to check id in commonService.quantityList$.getValue() available or not
This is my code
HTML
<div *ngFor="let item of commonService.quantityList$.getValue(); let i = index" class="Box">
<label>Qty : {{commonService.indexKey$.getValue()== item.id?item.quantity - commonService.indexKey$.getValue().count:item.quantity}}</label>
</div>
Example data
commonService.quantityList$.getValue()
quantity = [
{ id:1, quantity:100 },
{ id:2, quantity:200 },
{ id:3, quantity:30 }
];
commonService.indexKey$.getValue()
indexCount = [
{id: 1,count: 2},
{id: 2,count: 3},
{id: 3,count: 4},
]
Not sure what are you trying to do in your label really because seems you are making a comparison “==“ so the label will output “true” or “false”. Is that what you really want?
<div *ngFor="let item of commonService.quantityList$.getValue(); let i = index" class="Box">
<label>Qty : {{commonService.indexKey$.getValue()[i]== item.id?item.quantity - commonService.indexKey$.getValue()[i].count :item.quantity}}</label>
</div>
Is it possible to sort items from one array based on another variable by only using orderBy and not adding a count property to the items in the array?
Lets say i have an array and a map in the controller:
$scope.x = [{no:1,name:"a"},
{no:2,name:"b"},
{no:3,name:"c"}];
$scope.y = { 1: [1],
2: [1,2,3],
3: [1,2] };
and the html will look like this:
<div ng-repeat="i in x | orderBy: y[i.no].length">
{{i.no}}
{{ y[i.no] }}
{{ y[i.no].length }}
</div>
output:
1 [1] 1
2 [1,2,3] 3
3 [1,2] 2
but it should be:
1 [1] 1
3 [1,2] 2
2 [1,2,3] 3
You could use a predicate function, to specify your condition.
Try this:
<div ng-repeat="i in x | orderBy: findOrder">
{{i.no}}
{{ y[i.no] }}
{{ y[i.no].length }}
</div>
And:
$scope.findOrder = function(elem){
console.log(elem.no);
return $scope.y[elem.no].length;
}
A working fiddle.
Hi i need to paste letters between names in sorted objects array
$scope.names = [
{name: Anna}
{name: Angelina}
{name: Ivan}
{name: Michael}
{name: Marina}
]
<div ng-repeat="user in names">
<div>{{user.name}}</div>
</div>
And result should be:
A
Anna
Angelina
I
Ivan
M
Michael
Marina
I have no idea how to insert breaking First letter
You can use a Custom Filter like below,
$scope.myCustomFilterA = function(player) {
return player.name.substring(0,1).match(/A/gi) && $scope.otherCondition;
}
DEMO
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 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.