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.
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 am working on this feature where i have multiple cards with a toggle inside it.
I am getting the values for the card from the api, and using the
When i am trying to click on the toggle, the toggle on the cards opens where by i want to display the particular card toggle.
Here is the code for it:
<div v-for="values in api" :key="values.id">
<card>
<li>
<b-link v-b-toggle.collapse>
{{ value.name }}
</b-link>
<b-collapse id="collapse">
<pre>
{{ value.address }}
</pre>
</b-collapse>
</li>
</card>
<div>
Please assist
The problem is with the same id attribute of the collapse. You need to change the id assignment. Try the code below:
<div v-for="values in api" :key="values.id">
<card>
<li>
<b-link v-b-toggle="`collapse-${values.id}`">
{{ value.name }}
</b-link>
<b-collapse :id="`collapse-${values.id}`">
<pre>
{{ value.address }}
</pre>
</b-collapse>
</li>
</card>
<div>
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 want to set the width as dynamically with the data that i am gonna take from the array. But angular doesn't let me set it with usual way. How can i handle it ?
<div *ngFor="let item of products">
<div [style.width.px]="{{ item.size }}" class="Holiday"></div>
</div>
you do not need {{ }} when you're using [].
change [style.width.px]="{{ item.size }}" to [style.width.px]="item.size" and it should work.
Use ngStyle to apply dynamic styles.
<div *ngFor="let item of products">
<div [ngStyle]="{ 'width' : item.size+'px' }" class="Holiday"></div>
</div>
Demo : https://stackblitz.com/edit/angular-fel5sk
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>