How to auto select a radio button in a carousel in angular - javascript

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

Vue js watch vue pretty checkbox values

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>

Vue js edit content according to its ID

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>

Radio button not getting the proper value assigned

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.

how to scroll till the checked item , when popover is open again?

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

AngualrJS input checkbox on mobile not registering correctly?

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

Categories