in my angular app I am using npm-hm-carousel. I need to auto select the field in the middle of the carousel like in the photo.
But also i need to bind one of the ids to the selected item, when i scroll the carousel.
<ngx-hm-carousel [(ngModel)]="currentIndex" [show-num]="3" [infinite]="infinite" [drag-many]="true"
[aniTime]="200" [data]="selectedServiceObj.packages" class="carousel c-accent">
<section ngx-hm-carousel-container class="content">
<article class="item cursor-pointer" ngx-hm-carousel-item
*ngFor="let package of selectedServiceObj.packages; let i = index"
[ngClass]="{'visible': currentIndex===i}">
<div class="package">
<div class="well">
<div class="row header-part">
<div class="col-sm-2">
<input type="radio" name="package" [value]="package._id" [checked]="i===currentIndex" [(ngModel)]="inputSelectedPackageId" (change)="changed($event)">
</div>
</div>
</div>
</div>
</article>
<ng-template #infiniteContainer></ng-template>
</section>
<ng-template #carouselContent let-package let-i="index">
<article class="item cursor-pointer" [ngClass]="{'visible': currentIndex===i}">
</div>
</article>
</ng-template>
<ng-template #carouselPrev>
<div class="click-area">
<i class="glyphicon glyphicon-chevron-left" aria-hidden="true"></i>
</div>
</ng-template>
<ng-template #carouselNext>
<div class="click-area">
<i class="glyphicon glyphicon-chevron-right" aria-hidden="true"></i>
</div>
</ng-template>
<!-- <ng-template #carouselDot let-item>
<div class="ball bg-accent" [class.visible]="item.index === item.currentIndex"></div>
</ng-template> -->
</ngx-hm-carousel>
but in this way the value is not setting to the [(ngModel)] directive. I think it is because the radio icon is not clicking. but when i use the below code fragment for select the radio button manually, the [value] binds to [(ngModel)]
<input type="radio" name="package" [value]="package._id" [checked]="" [(ngModel)]="inputSelectedPackageId">
Thank you!
as i know we can't bind a value to a radio button. Since the clicked state won't change in a radio button. But it is good if you can use checkbox. you ll able to bind values to a checkbox and identify the state change
Related
I am using vue pretty checkbox to display a checkbox. However, based on if one of the checkboxes is checked or not my content has to change! So, I need something like a listener on those vue pretty checkbox components.
However, because vue pretty checkbox is a package I cannot modify the code. My question now is, how can I listen on those checkboxes if they have changed from another component.
Because the products-manager component gets the values. So, whenever the values of the checkboxes of the p-check inside the product-filter changes, I need to pass that to the products-manager component in order to reload the data!
Any ideas on how I can do this? I have already tried this and this but those aren't working for me...
Very important: The number of checkboxes is dynamically as you can see below. The first two checkboxes are always there but the checkbox below gets genereated by a v-for!
This is my sourcecode so far (home template):
<div id="home" class="row">
<div class="col-xl-12" id="product-sort-and-filter">
<products-filter ref="productsFilter" :product-types-prop="{{ json_encode($productTypes) }}"></products-filter>
</div>
<div class="col-xl-9">
<div class="products">
<products-manager ref="productsManager" :products-prop="{{ json_encode($products) }}" auth="{{ \Illuminate\Support\Facades\Auth::check() }}" :userprop="{{ json_encode(\Illuminate\Support\Facades\Auth::user()) }}" route="{{ route('product.index') }}"></products-manager>
</div>
</div>
<div class="col-xl-3">
<sidebar-manager ref="SidebarManager" :top-products-today-prop="{{ json_encode($products) }}" :top-products-week-prop="{{ json_encode($products) }}" :top-products-month-prop="{{ json_encode($products) }}"></sidebar-manager>
</div>
</div>
products filter component:
<template>
<div class="product-sort-and-filter-wrapper d-flex">
<div class="col-xl-9 product-sorting no-padding">
<ul class="list-inline">
<li class="list-inline-item">Highlights</li>
<li class="list-inline-item">Aktuell</li>
<li class="list-inline-item">Diskutiert</li>
</ul>
</div>
<div class="col-xl-3 product-filter no-padding text-right">
<div class="dropdown d-inline-flex">
<i class="fas fa-filter"></i>FILTERN
<div class="dropdown-menu" style="margin-top: 0px">
<div class="productTypesBoxes dropdown-item pretty-checkbox-wrapper">
<p-check name="productExpiredCheckbox" class="p-svg p-plain p-bigger p-smooth" ref="showExpired" toggle true-value false-value>
<span class="checkbox-label on rubik-medium">Abgelaufene anzeigen</span>
<label slot="off-label"><span class="checkbox-label off rubik-medium">Abgelaufene anzeigen</span></label>
<span slot="extra" class="svg"><i data-feather="check-square"></i></span>
<span slot="off-extra" class="svg"><i data-feather="square"></i></span>
</p-check>
</div>
<div class="dropdown-divider"></div>
<div class="productTypesBoxes dropdown-item pretty-checkbox-wrapper">
<p-check name="productTypeCheckbox" class="p-svg p-plain p-bigger p-smooth" ref="showAllProductTypes" toggle true-value false-value checked>
<span class="checkbox-label on rubik-medium">Alle anzeigen</span>
<label slot="off-label"><span class="checkbox-label off rubik-medium">Alle anzeigen</span></label>
<span slot="extra" class="svg"><i data-feather="check-square"></i></span>
<span slot="off-extra" class="svg"><i data-feather="square"></i></span>
</p-check>
</div>
<div class="productTypesBoxes sub dropdown-item pretty-checkbox-wrapper" v-for="productType in productTypes">
<p-check name="productTypeCheckbox" :value="productType.id" class="p-svg p-plain p-bigger p-smooth" :ref="'productType' + productType.id" toggle>
<span class="checkbox-label on ">{{ productType.label }}</span>
<label slot="off-label"><span class="checkbox-label off ">{{ productType.label }}</span></label>
<span slot="extra" class="svg"><i data-feather="check-square"></i></span>
<span slot="off-extra" class="svg"><i data-feather="square"></i></span>
</p-check>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "ProductsFilter",
props: ['productTypesProp'],
data() {
return {
highlights: true,
aktuell: false,
diskutiert: false,
showExipredDeals: false,
productTypes: this.productTypesProp
}
}
}
</script>
<style scoped>
</style>
I’m starting with vue js and I’m listing some data from database. More specifically posts with title, description and images.
I have Edit and Delete buttons. All posts are loaded using v-for. So when I click to edit one post, all the posts are “openning” to be edited.
I need to open the editing only in one post at a time. I mean, the specific post I really want to edit.
I made some progress with title input and with image delete badge but still need to work on Save and Cancel buttons (they open in all posts) and input files (when I choose files in second post for example, they load into first post).
<div id="app" class="row mb-50">
<div v-for="(item, index) in tours" v-bind:key="item.id" id="tours" class="col-md-12 mb-30">
<div class="tour-list">
<div class="tour-list-title">
<p>
<!-- here I can block input title to be disabled on other posts not than the specific one and I intend to do the same with textarea -->
<input class="inputEdit" type="text" ref="item.id" v-model="item.title"
:disabled="editingTour !== item.id" :class="{inputEditOpen: !editingTour}" />
</p>
</div>
<div class="tour-list-description">
<p>
<textarea class="inputEdit" :disabled="!editingTour" v-model="item.description"
:class="{inputEditOpen: !editingTour}">
{{ item.description }}
</textarea>
</p>
</div>
<div class="tour-list-pics">
<div class="row mb-20">
<div class="col-md-12">
<ul class="pics-list">
<li v-for="(image, index) in item.images">
<!-- here I could hide badge -->
<span :hidden="editingTour !== item.id" class="badge"
#click="$delete(item.images, index), deleteImage(image.imageID)">
<i class="fa fa-fw fa-times-circle"></i>
</span>
<div class="pics-list-image-container img-fluid cursor-pointer"
v-bind:style="{'background-image': 'url(http://localhost/tours/'+image.image + ')' }"
#click="openModal = true, showModal(image.image)">
</div>
</li>
<li v-if="urls" v-for="(url, key) in urls" :key="key">
<div id="preview" :ref="'url'" class="pics-list-image-container img-fluid"></div>
</li>
<li v-if="editingTour" class="add-pics-item">
<div :hidden="editingTour !== item.id" class="mt-10">
<label for="file-upload" class="custom-file-upload">
<img class="img-fluid" src="./img/plus-icon.png">
</label>
<input id="file-upload" type="file" #change="onFileChange"
name="files[]" multiple />
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="tour-list-options">
<div class="row">
<div class="col-md-6">
<span>
<button #click="editingTour = item.id" v-if="!editingTour"
class="btn border btn-circle tour-list-edit-btn">Edit</button>
</span>
<span>
<button #click="editTour(item)" v-if="editingTour"
class="btn border btn-circle tour-list-edit-btn">Save</button>
</span>
<span>
<button #click="clearInput" v-if="editingTour"
class="btn border btn-circle tour-list-delete-btn">Cancel</button>
</span>
<span>
<button #click="deleteTour(item.id, index)" v-if="!editingTour"
class="btn border btn-circle tour-list-delete-btn">Delete</buton>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
Update
If I use
<button #click="editTour(item)" v-if="editingTour == item.id" class="btn border btn-circle tour-list-edit-btn">Save</button>
all others Save buttons get hidden.
I think you can use add to each object of list new property isEditing and look for it in each item of the loop to check Save/Edit show.
Now your one prop editingTour can't be used for multiple edit, it can't store array of edited items id.
Template of buttons would look like:
<span>
<button #click="item.isEditing = item.id" v-if="!item.isEditing"
class="btn border btn-circle tour-list-edit-btn">Edit</button>
</span>
<span>
<button #click="editTour(item)" v-if="item.isEditing"
class="btn border btn-circle tour-list-edit-btn">Save</button>
</span>
<span>
<button #click="clearInput(item)" v-if="item.isEditing"
class="btn border btn-circle tour-list-delete-btn">Cancel</button>
</span>
<span>
<button #click="deleteTour(item.id, index)" v-if="!item.isEditing"
class="btn border btn-circle tour-list-delete-btn">Delete</button>
</span>
I have a radio button group that is being rendered dynamically. I have an NgModel assigned to this group and I want that whenever the button is clicked, a function is called that accesses which button is clicked. I added different values to each button but somehow the value being assigned is coming blank. Here is my code:
component.html:
<div class="form-group row position-relative" *ngFor="let item of options; let i=index">
<div class="col-4">
<label class="text-capitalize">{{item.label}}</label>
</div>
<div class="col-4">
<label class="text-capitalize">{{item.value}}</label>
</div>
<div class="col-3">
<input type="{{builderService.editObj.type}}" name="checked" [value]="item.value" (click)="changeSelectedElement($event)" [(ngModel)]="checkedElement">
</div>
<div class="col-1 text-right">
<i class="fa fa-times pointer" (click)="editService.fnRemove('options', i)"></i>
</div>
</div>
component.ts:
changeSelectedElement(e){
console.log('this.checkedElement -------> ', this.checkedElement, e.target.value);
}
The log statement logs a blank value:
this.checkedElement ------->
I need to access the item.value of each radio button here. The items are being printed properly when using string interpolation so no, item.value is not blank.
I have a ionic popover , what i need to do is when i select any option from popover that is last in the list after scroll ,.after the selection the popover gets closed, but when i reopen that popover again it again takes me to the top of the scroll , i want to scroll till the selected item in popover when i open it again ?
here is my html:
<script id="templates/ListViewCreator.html" type="text/ng-template">
<ion-popover-view class="filterpopoverMargins">
<ion-header-bar class="">
<h1 class="title" style="color: black;">Select Views</h1>
</ion-header-bar>
<ion-content>
<div class="list selectfilterListClass" ng-repeat="item in filterColumn" style="background-color:darkgrey!important;" ng-click="itemCheckedUnCheckedFilterhandler(item)">
<label class="item item-radio wrapping-list ">
<input type="radio" name="group">
<div class="item-content" style="">
{{item.label}}
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>
</ion-content>
<ion-footer-bar>
<button ng-click="defaultSetting()" class="button bar-balanced defaultbtnClass">Default</button>
</ion-footer-bar>
</ion-popover-view>
</script>
Kindly help me to get the answer
I have an input checkbox within an ng-repeat as follows:
<div class="provisions">
<label ng-repeat="(key, value) in data">
<div class="innerProvision">
<input class="provisionCheck" type="checkbox"
ng-model="proValue" ng-change="change(key,proValue)"
ng-value="value" ng-click="enable($event,proValue);">
<span>
<i class="fa fa-check-square-o" ng-show="toggle"> </i>
<i class="fa fa-square-o" ng-hide="toggle"> </i>
</span>
<h5> {{value.label}}</h5></li>
</div>
</label>
</div>
The input is styled as a 100% width by 175px height so that it acts as a button. I need it as an input for my form data though...
This works great on desktop with no issue. However on mobile nothing is fired unless I tap constantly until I tap something that fires it (no method of taps, just spastic tapping)... Any ideas why this is happening / not happening? I use the ng-change to get the !Boolean. The ng-click is to trigger a style change. neither work as they do on desktop.
Help is needed, so any is greatly appreciated!
Okay, so I just swapped the input for a button and handled the value swap in the controller:
<div class="provisions">
<!--<label ng-repeat="(key, value) in data">-->
<div class="innerProvision" ng-repeat="(key, value) in data">
<button class="provisionCheck" ng-click="enable($event,key);">
</button>
<span>
<i class="fa fa-check-square-o" ng-show="toggle"> </i>
<i class="fa fa-square-o" ng-hide="toggle"> </i>
</span>
<h5> {{value.label}}</h5></li>
</div>
<!--</label>-->
</div>
controller:
someValue = !someValue