I am using Ionic 4 and Angular 10, am loading loading data date-wise and working fine but at first-time load single record of the day, infinite scroll does not trigger ioninfinte method.
<ion-content [fullscreen]="true" class="ion-padding">
<ion-list>
<ion-item *ngFor="let employee of itemListData">
<ion-avatar slot="start">
<img [src]="employee.imageUrl">
</ion-avatar>
<ion-label>
<ion-text>
<h2>{{employee.name}}</h2>
<p>{{employee.jobtype}}</p>
</ion-text>
<ion-text color="medium">
<p>{{employee.email}}, {{employee.address}}</p>
</ion-text>
</ion-label>
</ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
Related
I have a table where in the last column there is a button that pressing it pops-up a modal with some information and actions to do.
To this modal I want to pass a value from the table (from a specific cell of each row) but the modal shows always the cell value from the last row of the table (it is like it considers the whole table as one row).
To do some test I wrote the attribute to be appeared on the button title ,and so far it works well (to each button it appears the correct attribute of each row).
It seems that in the next level (inside the modal) there is a misunderstanding and whichever modal opens it presents always the cell value of the last row.
table
modal
<b-table
sticky-header
selectable
select-mode="single"
selected-variant="success"
w-auto
show-empty
small
stacked="md"
id="eventdataTable"
striped
hover
responsive
:items="items"
:fields="event_columns"
:per-page="perPage"
:current-page="currentPage"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
:sort-direction="sortDirection"
:filter="filter"
:filterIncludedFields="filterOn"
#filtered="onFiltered"
>
<template v-slot:cell(nearby_venues)="row">
<div>
<b-button
variant="info"
class="text-center"
size="sm"
#click="show1 = true"
v-b-modal="'modal1'"
>Nearby Venues {{ row.item.api_id }}
</b-button>
<b-modal
id="modal1"
ok-variant="info"
v-model="show1"
size="sm"
title="Nearby Venues"
> {{ row.item.api_id }} *This appears correct*
<p align="left">Choose Venues close to</p>
<b-form-select
v-model="userdata.eventApiId"
class="mb-3"
>
<template slot="first">
<option :value="row.item.api_id">
{{ row.item.api_id }} *This appears wrong -the value of the column cell from the last row*
</option>
</template>
</b-form-select>
<label
class="mr-sm-3"
for="venue-category-selection"
></label>
<b-form-select
class="mb-2 mr-sm-2 mb-sm-0"
v-model="userdata.selectedVenueCategory"
:options="venue_categories"
value-field="id"
text-field="name"
id="venue-category-selection"
size="sm"
></b-form-select>
<hr width="300" align="left" />
<div>
<p align="left">Distance</p>
<label
class="mr-sm-3"
for="event-place-selection"
></label>
<b-form-input
v-model="userdata.distance"
placeholder="distance"
width="5px"
></b-form-input
>km.
<b-button
size="sm"
variant="success"
#click="VenuesFromSelectedEvent"
v-b-toggle.collapse-2
>
Click Here
</b-button>
</div>
</b-modal>
</div>
</template>
</table>
The problem here is that there is a loop in this component going through every row, rendering a new b-modal for each row. The problem is in this part of the code:
```
<b-form-select
v-model="userdata.eventApiId"
class="mb-3">
```
Each time a modal is rendered for a new row, it changes the userdata.eventApiId to the value for the current row. So the userdata.eventApiId will always end up being the api_id for the last row of the table.
One solution would be to change the code so that when the button is clicked, you change the userdata.eventApiId to the row.item.api_id.
I also wouldn't recommend putting the modal in the loop, as you would be creating a lot of hidden modals. I would just have one modal outside of the table that changes the value of userdata.
When I portrait mode *ngIf it hides values what I want but when I make the device landscape it's showing empty cards between true values.
<ion-col sizeLg="4" sizeMd="4" sizeXs="12" *ngFor="let order of orders">
<ion-card *ngIf="order.status =='CL'">
<ion-card-title>
<h4>{{order.title}}</h4>
</ion-card-title>
<ion-card-content>
<ion-item>
<h4>{{order.description | filter:[200, '...']}}</h4>
</ion-item>
</ion-card-content>
<ion-button type="button" color="danger">Canceled</ion-button>
<ion-button type="button" color="primary">Delivered</ion-button>
</ion-card>
</ion-col>
The problem is that you're hiding the card but you're still leaving an empty column. Please try by hiding both the card and the column instead:
<ng-container *ngFor="let order of orders">
<ion-col sizeLg="4" sizeMd="4" sizeXs="12" *ngIf="order.status =='CL'">
<ion-card >
...
</ion-card>
</ion-col>
</ng-container>
Currently I am working on PWA project. In that I am using ionic-vue package. I am using ion-input for taking user input in form but required and size properties not working.
Code for vue component:
<template>
<div>
<ion-header>
<ion-toolbar>
<ion-icon name="close" class="close-icon" #click.prevent="redirectTo(close)"></ion-icon>
<ion-title>{{ title }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="occupie-field" padding>
{{ content }}
<div>
<ion-input class="modal-ion-input"
:placeholder="rootElement.$t('number-of-person')"
type="number" mode="ios" inputmode="decimal"
:value="total_person"
#input="total_person = $event.target.value"
></ion-input>
<ion-input class="modal-ion-input"
:placeholder="rootElement.$t('name')"
:value="booking_name"
#input="booking_name = $event.target.value"
></ion-input>
<ion-input class="modal-ion-input"
:placeholder="rootElement.$t('mobile-no')"
type="tel" inputmode="tel"
:value="contact_number"
#input="contact_number = $event.target.value"
></ion-input>
<ion-input class="modal-ion-input"
:placeholder="rootElement.$t('gstin-no')"
:value="gst_no" size="15" type="text"
#input="gst_no = $event.target.value"
></ion-input>
<!-- <tags-input
element-id="tags"
:existing-tags="available_table_list"
:typeahead="true"
:showAddedTags="true"
typeahead-style="dropdown"
:delete-on-backspace="false"
:only-existing-tags="true"
placeholder="Merge Table"
#tag-added="onTagAdded"
#tag-removed="onTagRemoved"
v-model="selectedTags"
></tags-input> -->
<!-- <ion-list> -->
<ion-item class="select-tablee">
<ion-label hidden>{{rootElement.$t('select-tables')}}</ion-label>
<ion-select :placeholder="rootElement.$t('merge-table')" multiple="true" value="merge_tables" #ionChange="selectChange($event)" :disabled="Object.keys(available_table_list).length === 0">
<ion-select-option v-for="(table, index) in available_table_list" :key="index" :value="index">{{ table }}</ion-select-option>
</ion-select>
</ion-item>
<!-- </ion-list> -->
</div>
<ion-button class="occupie-table-button" #click.prevent="submit" :disabled="disableBtn">{{rootElement.$t('occupie-table')}}</ion-button>
</ion-content>
When I add required property in ion-input then required property not working and form submitted without checking.
see this - https://gist.github.com/mlynch/2ff3692341276ba959fea96a620097f9
try
<IonInputVue v-model="contact_number" size="10"/>
How can I uncheck a radio button or reset a radio group in Ionic 4?
This is not working (which used to work until Ionic 2):
<form [formGroup]="myForm">
<ion-list formControlName="listOptions">
<ion-radio-group>
<ion-item class="bgtransparent" [ngClass]="{'bgred': correctAnswerFirst}">
<ion-radio value="answer1" (ionSelect)="processSelectedAnswer(1)"></ion-radio>
<ion-label>{{answer1}}</ion-label>
</ion-item>
<ion-item class="bgtransparent" [ngClass]="{'bgred': correctAnswerSecond}">
<ion-radio value="answer2" (ionSelect)="processSelectedAnswer(2)"></ion-radio>
<ion-label>{{answer2}}</ion-label>
</ion-item>
<ion-item class="bgtransparent" [ngClass]="{'bgred': correctAnswerThird}">
<ion-radio value="answer3" (ionSelect)="processSelectedAnswer(3)"></ion-radio>
<ion-label>{{answer3}}</ion-label>
</ion-item>
<ion-item class="bgtransparent" [ngClass]="{'bgred': correctAnswerFourth}">
<ion-radio value="answer4" (ionSelect)="processSelectedAnswer(4)"></ion-radio>
<ion-label>{{answer4}}</ion-label>
</ion-item>
</ion-radio-group>
</ion-list>
</form>
.
this.myForm = formBuilder.group({
listOptions: ['']
});
So mainly this function does not work anymore:
this.myForm.controls.listOptions.reset();
Should your formControl be on the ion-radio-group?
<form [formGroup]="myForm">
<ion-list>
<ion-radio-group formControlName="listOptions">
I'm trying to display the radio button data based on user select but it doesn't display anything. Here is my code :
<div ng-app="" ng-init="categoryID">
<ion-list radio-group>
<ion-item>
<ion-label>Category 1</ion-label>
<ion-radio value="category1" ng-model="categoryID"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Category 2</ion-label>
<ion-radio value="category2" ng-model="categoryID"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Category 3</ion-label>
<ion-radio value="category3" ng-model="categoryID"></ion-radio>
</ion-item>
</ion-list>
<p>Category : {{ categoryID }}</p>
</div>
Trying to display like how it display at this url https://codepen.io/terrer-sandman/pen/erMzzQ