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>
Related
I am trying to add a heading and a description to my galleries in the page galerie.html that are for looped but am having an issue with this, the link to the entire website: https://github.com/smarchitects/smarchitectsweb
How do I add a headline and description into the for loop?
Thank you!
I tried adding this code snippet:
<div class="col-12 center">
<h2>{{item.headline}}</h2>
<p>{{item.about}}</p>
</div>
in various places in the for loop and loop and then added this in various places in the front data:
"- headline: XXX"
"- about: YYY"
but none of the combinations worked for me...
Nice website! I cannot reproduce the issue and see any problem because your code is working for me.
Using {{ section | inspect }} shows this on the page:
{"gallery"=>[{"column-size"=>"col-4_sm-12", "aspect-ratio"=>"landscape", "background_image"=>"/images/1.jpg", "description"=>"Karolína Harrachov"}, {"column-size"=>"col-4_sm-12", "aspect-ratio"=>"landscape", "background_image"=>"/images/2022Harrachovexterier/SMARCH_HARR_03_FINAL_.jpg", "description"=>"Karolína Harrachov"}, {"column-size"=>"col-4_sm-12", "aspect-ratio"=>"landscape", "background_image"=>"/images/2022Harrachovexterier/SMARCH_HARR_02B_FINAL_CORR01_.jpg", "description"=>"Karolína Harrachov"}]}
Your current code (below) seems to work fine though:
{%for section in page.galleries%}
<section class="padded">
<div class="capped-width m-l-center m-r-center" id="projekt-{{forloop.index}}">
<div class="gallery grid" id="lightgallery-{{forloop.index}}">
{% for item in section.gallery %}
<a class="{{item.column-size}} gallery-item" href="{{item.background_image}}">
<div class="bg-image lazy-div relative {{item.aspect-ratio}}" data-main="{{item.background_image}}">
<div class="galerie-overlay">
{{ item.description }}
</div>
</div>
</a>
{% endfor %}
</div>
</div>
</section>
{%endfor%}
The description text is shown as expected as an overlay when hovering over an image.
I don't see any headline or about attributes.
bindings={
“ng-reflect-ng-if”: “false”
}
<ng-template class=“no-result-product” [ngIf]=“products” [ngIfElse]=“noproducts”>
<div class=“list-product” fxLayout=“row wrap” fxLayoutAlign=“center stretch” *ngIf=“products”>
<app-template-product *ngFor=“let product of products”
class=“list-product__item”
[product]=“product”>
</app-template-product>
</div>
</ng-template>
<ng-template #noproducts>
<div> <img src=“./assets/img/shop/not-found-product.svg” alt=“”>
<div >{{ ‘not.found.product.message’ | translate }}</div>
</div>
</ng-template>
{{ ‘not.found.product.message’ | translate }}
the content is not displayed !!
here you are using ngIf directive, and passing your 2nd template inside of ngIfElse property
<ng-template class=“no-result-product” [ngIf]=“products” [ngIfElse]=“noproducts”>
that means that your "else template" will appear if products value is falsy.
I made a form with the FormBuilder of Symfony.
When I put my form in twig, the form_start(form) and form_end(form), it add a tag for each input.
I don't understand why twig adds a tag.
What is the solution to remove this tag
Thanks for your answer :)
Also, my formbuilder is like that :
->add('title', TextType::class, array(
'label'=>false,
'attr'=>array('autofocus'=>true)
))
my twig is like that :
{{ form_start(form) }}
<div class="row">
<div class="col-sm-9 p-1">
{{ form_row(form_record.title, {'attr':{'class':"form-control", 'placeholder':"Description"|trans, 'title':"Description"|trans }}) }}
{{ form_errors(form_record.title) }}
</div>
<div class="col-sm-1 pt-2">
<button type="submit" class="btn btn-success btn-circle btn-sm">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
{{ form_end(form) }}
and the result in the html source code is :
<div class="row">
<div class="col-sm-9 p-1">
<div>
<input type="text" id="app__title" name="app_[title]" required="required" class="form-control" placeholder="Description" title="Description">
</div>
</div>
</div>
So Twig add the
<div>
that I don't want. How can I remove this autocompleted tag?
I tried the
{% do form_record.title.set rendered %}
but maybe I think that it does not work.
Edit: Okay it seems I misunderstood the issue at first.
I thought you wanted to hide a field you had in your form which can be done with
{% do form.myField.setRendered %}
Now that I understand the issue, I believe it comes from the way your field is being printed.
There are 3 main components to a form field.
Label: form_label(form.field)
Widget: form_widget(form.field)
Errors: form_errors(form.field)
There is a way to print all three components at once. The function is
form_row(form.field)
Here comes the culprit: form_row(). Because it normally prints 3 different components, it adds a div around it!
Futhermore, by looking at the form type and seing 'label' => false, I can say that the label was printing at first using form_row.
To avoid having to define 'label'=>false everytime, you can simply print your form field in this manner:
{{ form_widget(form_record.title, {'attr':{'class':"form-control", 'placeholder':"Description"|trans, 'title':"Description"|trans }}) }}
{{ form_errors(form_record.title) }}
You can simply omit {{form_label(form_record.title)}} and it won't print.
On the other hand, I also noticed something that might be okay but seem wrong with the given example.
In the twig you shared, the form starts with {{ form_start(form) }} but then the field is {{ form_row(form_record.title)}}.
From where I come from form_record is undefined here. I would use {{ form_row(form.title)}}
Anyways, the explanation for the difference between form_row and form_widget can be found here: Symfony form differences between row and widget
Enjoy!
I am currently working on a web application using angular and angular material. The page in question holds several profiles each with a button that when clicked removes the information currently showing and replaces it with the rest of the profile information. The issue is that when I click this button on one profile it does this information flip on all the profiles at once. I need help figuring out how to have the button only affect the profile it is associated with.
I am still relatively new to coding, so I've mainly been doing research on advice on how to approach this particular situation, but nothing I've found so far has worked.
<mat-card class="bpBuddyCont" *ngFor= "let profile of profileList">
<div>
<ul class="bpBuddies">
<li class="li2">
<div *ngIf="!showHiddenInfo">
<mat-card-title class="specifics">{{profile.dogName}}</mat-card-title>
<mat-card-subtitle class="subtitle">Owner ~ {{profile.ownerFirstName}}</mat-card-subtitle>
<mat-card-subtitle>Member Since {{profile.yearJoined}}</mat-card-subtitle>
</div>
<div class="column4" *ngIf="showHiddenInfo">
<span class="details4">Additional Notes: </span>
<span class="details3">{{profile.additionalNotes}}</span>
</div>
</div>
<button mat-button color="primary" class="btn" (click)="showHiddenInfo = !showHiddenInfo">{{showHiddenInfo ? 'Back' : 'More...'}}</button>
</li>
</ul>
</div>
</mat-card>
You can extend the profile object with
profile.showHiddenInfo and set it as false initially.
For this in your js(most probably the component file) after getting profileList,
profileList.forEach((profile, index) => {
angular.extend(profile, {showHiddenInfo: false});
//not sure about this angular.extend but you need to extend your object here
});
Now when the button is clicked replace showHiddenInfo, i.e.
profile.showHiddenInfo = !profile.showHiddenInfo;
And Replace
*ngIf="showHiddenInfo"
with
*ngIf="profile.showHiddenInfo"
You can do this using one boolean variable for each object, as profile.isExpanded and on click change it as like:
(click)="profile.isExpanded = !profile.isExpanded"
HTML Code:
<mat-card class="bpBuddyCont" *ngFor="let profile of profileList">
<div>
<ul class="bpBuddies">
<li class="li2">
<div *ngIf="!profile.isExpanded">
<mat-card-title class="specifics">{{profile.dogName}}</mat-card-title>
<mat-card-subtitle class="subtitle">Owner ~ {{profile.ownerFirstName}}</mat-card-subtitle>
<mat-card-subtitle>Member Since {{profile.yearJoined}}</mat-card-subtitle>
</div>
<div class="column4" *ngIf="profile.isExpanded">
<span class="details4">Additional Notes: </span>
<span class="details3">{{profile.additionalNotes}}</span>
</div>
<button mat-button color="primary" class="btn" (click)="profile.isExpanded = !profile.isExpanded">{{profile.isExpanded ? 'Back' : 'More...'}}</button>
</li>
</ul>
</div>
</mat-card>
No change in TS file.
WORKING STACKBLITZ
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.