I can access my desired field from a JSON object like so:
<li ng-repeat='customer in customers[0][data]["DisplayName"] | filter:search'>{{ customer }}</li>
However, that only returns one object's property.
Using AngularJS, is there a way to loop through the following?
customers[0][data]["DisplayName"]
customers[1][data]["DisplayName"]
customers[2][data]["DisplayName"]
customers[3][data]["DisplayName"]
customers[4][data]["DisplayName"]
...
customers is an array, so by doing ng-repeat you will already loop through it. But I think what you want is either: 1) show the DisplayName property inside <li> or 2) filter by DisplayName.
To show the nested property, do the following
<li ng-repeat="customer in customers">
{{ customer[data]["DisplayName"] }}
</li>
To filter on nested property, for example on DisplayName:
<li ng-repeat="customer in customers | filter:{data: {DisplayName: search}}">
...
</li>
Related
My object has a specific set of key / value pairs,
i want to get a specific value, not everything, how can i do this?
For example:
.ts
movie = {
title:'title',
description:'descriprtion',
rating:4
};
html:
<ul *ngFor="let item of movie | keyvalue">
<li> {{item.value}} </li>
</ul>
And I only want to receive item.description, can you tell me how this can be implemented?
<ul *ngFor="let item of movie | keyvalue">
<ng-container *ngIf="item.key === 'description'">
<li>{{item.value}}</li>
</ng-container>
</ul>
But to be honest you would be better off just doing:
<div>{{ move.description }}</div>
Since you do not seem to want to iterate the object props, but only want description.
I have a list like this
<ul>
<li *ngFor="let product of items.Products| slice 0:3 ; let i = index">
{{ product?.ProductsDescription}}
<li>
</ul>
All i want i to is, display a list of products, but i wan't to limit the exibition to only 3 products, and below, in another <li></li> display "And more {{ quantity-left-of-products }}"
Example:
I Have 6 products, so it would display:
Item 1
Item 2
Item 3
And more 3
Something like this:
In my knowledge i would have to find a way to access the index property outside the ngFor.
Can anyone help me?
You can achieve what you want without accessing the index value outside the context.
Create a variable in TS to use it as a parameter in the slice pipe.
sliceValue = 3;
loadMore() {
this.sliceValue = items.Products.length;
}
Template:
<ul>
<li *ngFor="let product of items.Products| slice 0:sliceValue ; let i = index">
{{ product?.ProductsDescription}}
<li>
<li (click)="loadMore()" *ngIf="items.Products.length > sliceValue">And more {{items.Products.length - sliceValue}}</li>
</ul>
Use *ngIf for displaying the "And More" when necessary. When the user clicks on "And More" the <li> for "And More: hides and the rest of the list loads.
I have a some code that currently displays all my items and sort them by icon.
<li ng-repeat="availableItem in model.availableItems | compareArrays:model.selectedItems:'alias' | orderBy:'icon' | filter:searchTerm"
ng-click="selectItem(availableItem)"
class="-three-in-row">
<a class="umb-card-grid-item" href="" title="{{ availableItem.name }}">
<i class="{{ availableItem.icon }}"></i>
{{ availableItem.name }}
</a>
</li>
My goal is to create a div for each icon type (categories) and place them inside the div how can I do that in angular? I have tried with ng-if but cant get it to work the way I want to. Desired output would look something like this
You can use groupBy filter and apply css accordingly to each li tag.
<ul ng-repeat="(key, value) in stuff | groupBy: 'category'">
category name: {{ key }}
<li ng-repeat="item in value">
item: {{ item.name }}
</li>
</ul>
Also https://github.com/a8m/angular-filter is a great resource as well that allows you to do more outside AngularJs box.
I believe this is what you need:
How can I group data with an Angular filter?
All you need to do is to substitute the key with the div for your icon group.
So I have an array that I need to display, problem is the array can't be populated until the page is already displayed and the user has entered a value
Stepping through my code I can see that the array is being populated correctly, however, the view isnt updated
I'm able to update it using this and an on click event
onAddClick(){ this.CarTypes.push(newAddCar("1",true,true,1,1,"1","1"))
}
But when I call it through a method, it doesn't update, even though the parameters are 100% correct
add(NMsg:string, Nom: boolean, show: boolean,image: number, order: number, id: string, name:string){
this.CarTypes.push(newAddCar(NMsg,Nom,show,image,order,id,name))
}
Can anyone help?
<div>
<!--<ul *ngFor="let cars of CarTypes" (click)="Click(cars)">
{{ cars.CarTypes.length ? cars.CarTypes[0].Name : '' }}
</ul>-->
<ul>
<li *ngFor="let cars of CarTypes" >
{{cars.Name}}
</li>
<button (click)="onAddClick()">Add</button>
</ul>
<!--<select name="selectedcar" [(ngModel)]="selectedcar" ng-repeat="car as car.Name in CarTypes">{{cars}}</select>-->
</div>
I have a json object(items) and I am iterating through ngFor. I need to assign index value to variable i only if it matches the condition item.isRepetable==true Is there any way I can assign the index value to variable i in *ngFor on condition matches
<ul *ngFor="let item of items;let i=item.isRepetable?index:0">
<li>{{item}}</li>
</ul>
Create and apply a filter pipe, then you don't need a condition and the index will match.
<ul *ngFor="let item of items | isRepeatableFilter;let i=index">
<li>{{item}}</li>
</ul>
There is no way to modify the index generated by *ngFor