<div class="carousel-cell lw-pr-30" style="width: 220px;" *ngFor="let item of product?.products; let i = index">
<div class="lw-w-auto lw-h-80p">
<div class="lw-ff-Ubuntu lw-fs-18"> $ {{item.price}}</div>
<div class="lw-fs-12 lw-ff-Ubuntu">{{item.name}}</div>
<div class="lw-fs-12 lw-ff-Ubuntu">1 Lbs</div>
</div>
<mat-icon class="lw-ta-e " style="float: right;height: 40px;" *ngIf="!item.cart" (click)="addCart(names,item)" svgIcon="cartround"></mat-icon>
<div class="lw-ta-e lw-d-flex lw-align-center" style="float: right;height: 40px;" *ngIf="item.cart">
<mat-icon (click)="removeCounter(names,item)" svgIcon="minus" class="lw-cursor-p"></mat-icon>
<input type="text" class="count" [ngModelOptions]="{standalone: true}" [(ngModel)]="names" name = 'names' min="1" maxlength="2" max="20" disabled/>
<!-- ngModel #names="ngModel" -->
<mat-icon (click)="addCounter(names,item)" svgIcon="plus" class="lw-cursor-p"></mat-icon>
</div>
</div>
</div>
sample image
when i click on plus button all the input changes at a time.how to change the clicked button's input
I think there is a typo.
try to change
(click)="..(*names*,item)"
to
(click)="..(*name*,item)"
if not try to use index
if possible please share stackblitz we can help.
Related
I've got a problem with my ngSwitchCase. Well the problem is that the case doesn't correctly fulfill its job. When I drag and drop a textbox, a textbox should appear. But When I drop the textbox, I get a textbox and textarea, which is another ngSwitchCase. Does anyoneknow what I'm doing wrong, because I can't seem to figure it out.
formadd.component.html
<fieldset class="element">
<legend class="voeg-element" placeholder="voeg element toe" cdkDropList
#doneList="cdkDropList"
[cdkDropListData]="done"
(cdkDropListDropped)="drop($event)">
<div [ngSwitch]="item" class="cdkdrag" *ngFor="let item of done" cdkDrag>
<div *ngSwitchCase="Textbox">
<input kendoTextBox>
</div>
<div *ngSwitchCase="Textarea">
<textarea kendoTextArea></textarea>
</div>
<div *ngSwitchDefault>{{item}}</div>
</div>
</legend>
</fieldset>
panelwrapper.component.html
<kendo-panelbar class="panelbar">
<kendo-panelbar-item class="panelbar-een" [title]="'Elementen'" cdkDropList cdkDropListSortingDisabled>
<kendo-panelbar-item class="panelbar-twee" [title]="'Categorie'" icon="custom-icon" cdkDrag [cdkDragData]="'Categorie'"></kendo-panelbar-item>
<kendo-panelbar-item class="panelbar-drie" [title]="'Textbox'" icon="textbox" cdkDrag>
<kendo-textbox-container floatingLabel="Text Box 1">
<input kendoTextBox placeholder="test" *cdkDragPreview/>
</kendo-textbox-container>
</kendo-panelbar-item>
<kendo-panelbar-item class="panelbar-vier" [title]="'Textarea'" icon="textarea" cdkDrag [cdkDragData]="'Textarea'"></kendo-panelbar-item>
<kendo-panelbar-item class="panelbar-vijf" [title]="'Date'" icon="calendar-date" cdkDrag [cdkDragData]="'Date'"></kendo-panelbar-item>
</kendo-panelbar>
This is what I see when I drop the textbox into the fieldset:
You will need to use single quotation marks inside of a *ngSwitchCase.
E.g:
<fieldset class="element">
<legend class="voeg-element" placeholder="voeg element toe" cdkDropList
#doneList="cdkDropList"
[cdkDropListData]="done"
(cdkDropListDropped)="drop($event)">
<div [ngSwitch]="item" class="cdkdrag" *ngFor="let item of done" cdkDrag>
<div *ngSwitchCase="'Textbox'">
<input kendoTextBox>
</div>
<div *ngSwitchCase="'Textarea'">
<textarea kendoTextArea></textarea>
</div>
<div *ngSwitchDefault>{{item}}</div>
</div>
</legend>
</fieldset>
I have list of values in div with parent and child relation ship. When I toggle any specific parent record, all the child records associated with other parents also gets opened. I bind this div from service (API)
Please find the sample code used for the above function
<div class="table rts-table-parentChild" *ngFor="let userRole of userRoleActions; let i = index">
<div class="table-row table-header">
<div class="table-cell">
<span *ngIf="userRole.userRoleSubActions.length" id="section{{userRole.actionName}}"
class="margin-right-5 fa fa-plus-circle" role="button"
tabindex="0" [ngClass]="[clickPlus === false ? 'fa fa-plus-circle' : 'fa fa-minus-circle']" (click)="clickPlus=!clickPlus"></span>
{{userRole.actionName}}
</div>
<div class="table-cell">
<input type="checkbox" [ngModelOptions]="{standalone: true}" class="setup-checkbox" id="ChekCreate{{userRole.actionName}}" [(ngModel)]="userRole.isCreateChecked"
(click)="selectParentRole(i,'create')">
</div>
<div class="table-cell">
<input type="checkbox"[ngModelOptions]="{standalone: true}" class="setup-checkbox" id="ChekDelete{{userRole.actionName}}" [(ngModel)]="userRole.isDeleteChecked"
(click)="selectParentRole(i,'delete')">
</div>
</div>
<ng-container *ngIf="clickPlus">
<div style="display:table-row-group;" *ngFor="let item of userRole.userRoleSubActions; let j = index">
<div class="table-row ">
<div class="table-cell" class="subj"> {{item.actionName}}</div>
<div class="table-cell">
<input type="checkbox" [ngModelOptions]="{standalone: true}" class="setup-checkbox"
[(ngModel)]="item.isCreateChecked" (change)="isCreateChecked(i,'create')">
</div>
<div class="table-cell">
<input type="checkbox" [ngModelOptions]="{standalone: true}" class="setup-checkbox"
[(ngModel)]="item.isDeleteChecked" (change)="isCreateChecked(i,'delete')">
</div>
</div>
</div>
</ng-container>
Hi because are toggle on variable clickPlus That's why specific parent record, all parent record is togged. So you have to add
show:boolen
in model of userRoleActions and in click event you can toggle like
(click)="userRole.show=!userRole.show"
Hope you understand my point may this will help you.
I want to pass 3 values (2 dropdown's and 1 input field) from one page to another.User will select 2 dependent dropdowns after clicking on the button user will redirect to another page where he will ask to fill-up a form wherein above 3 details will be auto-filled.
The input field's data is passing to another page but the 2 dropdown's value are not passing.
Controller
public function getRequestDetails(Request $request){
$reqAOP = $request->get('areas');
$reqType = $request->get('request_type');
$reqTitle = $request->get('title');
Session::put('areas', $request->get('areas'));
return redirect('frontend_template.submitquery')->withInput($request->only('title'));
}
Blade page
<div class="col-md-6 float-container">
<div class="form-group" style="margin-bottom: 20px;">
<select style="margin-top: 15px;color: grey;font-size: 16px;" id="aops" class="form-control select2-list">
<option value="{{Session::get('areas')}}" selected>{{Session::get('areas')}}</option>
</select> </div>
</div>
<div class="col-md-6" style="height:33px;color: grey;display: none;width: 49%;line-height: 1;" id="req_options">
<div class="form-group" style="margin-bottom: 20px;">
<select style="margin-top: 15px;color: grey;font-size: 16px;" id="request_type" class="form-control select2-list" >
</select>
</div>
</div>
</div>
<br>
<div class="row form">
<div class="col-md-12 float-container">
<div class="form-group">
<input type="text" placeholder="Title *" style="margin-top: 10px;padding-left: 10px;font-size: 16px;" class="form-control" name="title" id="title" value="{{old('title')}}">
</div>
</div>
</div>
You can create a button like this to pass the value to next request/page
<a href="{{route('route_name',['area'=>'$variable','request_type'=>'$variable','title'=>''])}}"
class="btn btn-primary" style="text-decoration:none">
<i class="fa fa-folder-open"></i>Manage
</a>
In route you just need to declare the path like
Route::get('blade_path/{area}/{request_type}/{title}','Controller#function')->name('route_name');
I have a form with select options :
<div>
<select>
<option v-model="department" :value="n" v-for="n in ['Please select', 'Medicine', 'Dental']">{{n}}</option>
</select>
</div>
<div class="alignBtn">
<label><span> </span><input type="submit" v-on:click.prevent="generateSlip()" value="Submit" />
</label>
</div>
and based on the selection in the above I want to display header content:
<div v-if="{department} === 'Medicine'">
<h1>Option A</h1>
</div>
<div v-else>
<h1>Option B</h1>
</div>
but every time Option B is getting outputted .
I think that the v-model directive should be in the select element. You probably meant to do this ..
<div>
<select v-model="department">
<option :value="n" v-for="n in ['Please select', 'Medicine', 'Dental']">{{n}}</option>
</select>
</div>
<div class="alignBtn">
<label><span> </span><input type="submit" v-on:click.prevent="generateSlip()" value="Submit" />
</label>
</div>
You also don't need destructuring in this case. So you can use department in your equality comparison directly ..
<div v-if="department === 'Medicine'">
<h1>Option A</h1>
</div>
<div v-else>
<h1>Option B</h1>
</div>
Hello all I have the following piece of code:
<table class="details-table" *ngIf="peop && peopMetadata">
<tr *ngFor="let attribute of peopMetadata.Attributes">
<td class="details-property">{{attribute.AttributeLabel}}</td>
<td [ngSwitch]="attribute.AttributeType">
<div *ngSwitchCase="'String'">
<input matInput [(ngModel)] = "peop[attribute.AttributeKey]" />
</div>
<div *ngSwitchDefault>{{peop[attribute.AttributeKey]}
</div>
</td>
</tr>
<div>
<button ng-click="">Submit</button>
</div>
</table>
I want to disable the input based on an attribute values say peop[attribute.IsWritable]='false' . How can i achieve this here . Any help is appreciated
INPUT only approach:
<input [disabled]="!peop[attribute.IsWritable]" matInput [(ngModel)] = "peop[attribute.AttributeKey]" />
CONDITIONAL approach:
<ng-container *ngIf="peop[attribute.IsWritable]">
<input matInput [(ngModel)]="peop[attribute.AttributeKey]" />
</ng-container>
<ng-container *ngIf="!peop[attribute.IsWritable]">
<span>{{ peop[attribute.AttributeKey] }}</span>
</ng-container>
OR:
<input *ngIf="peop[attribute.IsWritable]" matInput [(ngModel)]="peop[attribute.AttributeKey]" />
<span *ngIf="!peop[attribute.IsWritable]">{{ peop[attribute.AttributeKey] }}</span>
I just came across the need to do this and found that I needed to use ng-disabled to do it.
<input id="my-input-id" class="my-input-class" type="number" name="my-input-name" ng-model="MyCtrl.myModel" required ng-disabled="MyCtrl.myProperty && MyCtrl.myProperty !== 'someValue'"></input>
Hope this helps someone else!