Ionic popup radio buttons - ionic-framework

I would like to implement $ionicPopup with radio buttons. However, what I tried doesn't work as expected. I should have 3 options to choose, so if I choose option '1' and press 'Yes', I would like the console log to print out '1'...so far I can't seem to connect the radio buttons with it's equivalent scope variable in controller.
How can I reflect changes from radio button partial that loads in ionic popup?
In controller:
$ionicPopup.confirm({
templateUrl: 'templates/partials/orderPopup.html',
title: 'XYZ?',
scope: $scope,
buttons: [{
text: 'Yes',
type: 'button-positive',
onTap: function (e) {
console.log($scope.choice);
}
}, {
text: 'No',
type: 'button-default',
onTap: function (e) {
$state.go('shoppingCart');
}
}]
})
And in view:
<ion-list ng-controller="shoppingCartCtrl">
<style>
.wrapping-list .item-content, .wrapping-list .item {
overflow: initial;
white-space: initial;
}
</style>
<ion-radio class="wrapping-list" ng-model="choice" ng-value="'1'">Option1</ion-radio>
<ion-radio class="wrapping-list" ng-model="choice" ng-value="'2'">Option2</ion-radio>
<ion-radio class="wrapping-list" ng-model="choice" ng-value="'3'">Option3</ion-radio>
</ion-list>
If I make a $scope.choice = 2 before the popup call, then I can see the option 2 being selected as a default, however, upon clicking any other option and then clicking OK, console returns 2

The issue is with ng-model. The 2-way binding in angular works when he model is an object which can be updated via reference from view as well as controller. So if you change your model as below, your code will work:
Controller
$scope.choice = {
value: '2'
};
HTML:
<ion-radio class="wrapping-list" ng-model="choice.value" ng-value="'1'">
Option1
</ion-radio>
<ion-radio class="wrapping-list" ng-model="choice.value" ng-value="'2'">
Option2
</ion-radio>
<ion-radio class="wrapping-list" ng-model="choice.value" ng-value="'3'">
Option3
</ion-radio>
I have created a codepen to demonstrate the working code here: http://codepen.io/addi90/pen/aNroNN?editors=1010

Related

Antd Modal+Carousel+Form shudders for 10ms

During opening antd modal I can see for 10ms that my modal is increased and displays not the first page of the carousel inside.
Here I have attached a Json file, which you can play in your Chrome DevTools (F12 -> Performance -> Load profile). Described problem appears on 1150ms. Here is the link to the codesanbox where you can play with my code. I found that the modal increases because my form layout equal to "vertical", but I still didn't get why the last page of my carousel appears first. I am thinking of some hooks in React like useLayoutEffect to render it correctly, however it seems to my as a antd bug, or my mistake somewhere and I don't want to overload my code with useless hooks.
Here is the code for that who won't open codesanbox:
import "./styles.css";
import React, { useState, useRef } from "react";
import { Modal, Carousel, Form, Button, Input, Image } from "antd";
export default function App() {
const [modal, setModal] = useState<boolean>(false);
const [pageOneForm] = Form.useForm();
const [pageTwoForm] = Form.useForm();
return (
<>
<Button onClick={() => setModal(true)}> open </Button>
<Modal
width={500}
centered
closable={false}
title={"Title of my modal"}
open={modal}
onCancel={() => setModal(false)}
okButtonProps={{ style: { display: "none" } }}
>
<Carousel dotPosition="top" swipeToSlide draggable arrows>
<div>
<img alt="card1" src="card1.png" className="card" />
<Form
form={pageOneForm}
layout="vertical" //it makes my modal huge for few ms
>
<Form.Item
label="Some input for 1 page"
name="carteVitale"
rules={[{ required: true, message: "" }]}
>
<Input />
</Form.Item>
</Form>
</div>
<div>
<img alt="card2" src="card2.png" className="card" />
<Form form={pageTwoForm} layout="vertical">
<Form.Item
label="Some input for 2 page"
rules={[{ required: true, message: "" }]}
>
<Input />
</Form.Item>
</Form>
</div>
</Carousel>
</Modal>
</>
);
}
I expect to render this modal without unplanned modal shakes
UPDATE:
Size of modal can be fixed by adding two keys to Carousel component:
<Carousel
adaptiveHeight={false}
lazyLoad="progressive"
...
or by playing with css:
<Carousel
initialSlide={0}
lazyLoad="ondemand"
className="cards-container"
...
<Form.Item
className="no-wrap"
...
and css will looks like:
.cards-container {
animation: fadein 0.5s ease;
position: relative;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.no-wrap label {
white-space: nowrap;
overflow: hidden;
}

Show/Hide password button not working when input is active in Ionic 3

I am trying to implement the show/hide button for the password field in Ionic 3. I have got the code help from here
login.html
<ion-item>
<ion-input [type]="passwordType" placeholder="Password" formControlName="password"></ion-input>
<ion-icon item-end [name]="passwordIcon" class="passwordIcon" (click)='hideShowPassword()'></ion-icon>
</ion-item>
login.scss
.passwordIcon{
font-size: 1.3em;
position: absolute;
right: .1em;
top: .5em;
z-index: 2;
}
login.ts
passwordType: string = 'password';
passwordIcon: string = 'eye-off';
hideShowPassword() {
this.passwordType = this.passwordType === 'text' ? 'password' : 'text';
this.passwordIcon = this.passwordIcon === 'eye-off' ? 'eye' : 'eye-off';
}
I have done one modification in the .scss file and made the icon absolute so that it appears on top of the input field instead of the side.
This icon click is working when the Input field is not active/selected but if I am in the middle of typing in the Input Field, the click is not working/recognized. Please help.
With the solution suggested my field looks like this.
I'm not entirely sure of what
... and made the icon absolute so that it appears on top of the input field instead of the side
would mean, but still, using position: absolute on top of inputs may lead to bugs specially on iOS.
Another possible issue of your code is that buttons are designed to handle issues related with taps in mobile devices, but icons may not work properly sometimes.
Anyway, please take a look at this working Stackblitz project to do something like this:
The code is quite simple actually - the idea is to use a button with an icon instead of just an icon to avoid issues with the tap event:
Component
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public showPassword: boolean = false;
constructor(public navCtrl: NavController) {}
public onPasswordToggle(): void {
this.showPassword = !this.showPassword;
}
}
Template
<ion-header>
<!-- ... -->
</ion-header>
<ion-content padding>
<!-- ... -->
<ion-item>
<ion-input placeholder="Password" [type]="showPassword ? 'text' : 'password'" clearOnEdit="false"></ion-input>
<button (click)="onPasswordToggle()" ion-button clear small item-end icon-only>
<ion-icon [name]="showPassword ? 'eye-off' : 'eye'"></ion-icon>
</button>
</ion-item>
</ion-content>
EDIT
Based on your comments, one way to keep the button inside of the border would be not to apply the border to the input, but to the ion-item.
Something like this for example:
ion-item {
border: 1px solid #ccc;
border-radius: 10px;
}
would result in:

Ionic3 Two-Way binding not work on cordova-plugin-antplus

When data get from ant+ device, page cannot show that on time.
code of ts:
this.antplus.subscribeHR(ID, (response) => {
this.heartrate = response.heartRate;
}, (error)=>console.log("error:" + error));
code of HTML:
<ion-item>
<button ion-button (click)="stopSearch();">Stop</button>
{{heartrate}}
</ion-item>
The value of heartrate just will update when page change.
This problem I also get on ionic-Native/stepcounter

Ionic 2: View does not update based on model change

I have a very simple page with a couple of controls.
My issue is that the page does not pickup changes to the model when the icon in upper right corner is clicked. This toggles the showFilterPane variable, which again should show or hide a div based on *ngIf="showFilterPane".
I have another page just like this one working, and I can not figure out why this isn't.
Any tips?
(I've tried using the ChangeDetectorRef.detectChanges(); which works, but then the rangeslider will not work. The draggable point doesn't update, or does not move to where you tap.)
The page:
<ion-header>
<ion-navbar>
<ion-title>MY AO</ion-title>
<ion-buttons end>
<button ion-button (click)="toggleFilterPane()" icon-only>
<ion-icon name="options"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<div class="container">
<div class="left">
<div *ngIf="isSearching" class="spinner-container">
<ion-spinner></ion-spinner>
</div>
<!-- put content here -->
</div>
<div class="right" *ngIf="showFilterPane">
<ion-list inset>
<ion-list-header>BANA</ion-list-header>
<ion-item>
<ion-select multiple="true" [(ngModel)]="woTrackFilter">
<ion-option>1</ion-option>
<ion-option>2</ion-option>
<ion-option>3</ion-option>
<ion-option>4</ion-option>
<ion-option>5</ion-option>
</ion-select>
</ion-item>
</ion-list>
<ion-list inset>
<ion-list-header>TEKNIKSLAG</ion-list-header>
<ion-item>
<ion-select multiple="true" [(ngModel)]="woDisciplineFilter">
<ion-option>Signal</ion-option>
<ion-option>Bana</ion-option>
<ion-option>EL</ion-option>
<ion-option>Tele</ion-option>
</ion-select>
</ion-item>
</ion-list>
<ion-list inset>
<ion-list-header>DAGAR</ion-list-header>
<ion-item>
<ion-range min="10" max="80" step="4" [(ngModel)]="woDaysFilter">
<ion-label range-left>10</ion-label>
<ion-label range-right>80</ion-label>>
</ion-range>
</ion-item>
</ion-list>
<button ion-button (click)="doSearch()">Search</button>
</div>
</div>
</ion-content>
The component:
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { WorkOrderDashboardPage } from "../work-order-dashboard/work-order-dashboard";
#Component({
selector: 'page-work-order-list',
templateUrl: 'work-order-list.html'
})
export class WorkOrderListPage {
private isSearching: boolean = false;
private showFilterPane: boolean=false;
private woTrackFilter: string[];
private woDisciplineFilter: string[];
private woDaysFilter: number;
constructor(public navCtrl: NavController, public navParams: NavParams) {
// Initialize storage providers here
}
ionViewDidLoad() {
console.log('ionViewDidLoad WorkOrderListPage');
}
toggleFilterPane(): void {
this.showFilterPane = !this.showFilterPane;
}
viewWorkOrder(event, workOrder): void {
this.navCtrl.push(WorkOrderDashboardPage, { workOrder: workOrder });
}
doSearch(): void {
console.log(this.woTrackFilter);
console.log(this.woDisciplineFilter);
console.log(this.woDaysFilter);
}
}
UPDATE: Found workaround
I tried creating a separate app, where the exact same code is working. That lead me to think something wasn't right on the LoginPage, the page that called setRoot() to the above page.
The login code looked like this:
WLAuthorizationManager.login("UserLogin", data).then(() => {
// Success
console.log("Logged in");
this.navCtrl.setRoot(WorkOrderListPage);
},
(err) => {
// failed
console.error(err);
this.showError("Username or password is incorrect");
})
I then figured it might be some Zone issue, and wrapped the setRoot call in zone.run() like this:
WLAuthorizationManager.login("UserLogin", data).then(() => {
// Success
console.log("Logged in");
this.zone.run(() =>
this.navCtrl.setRoot(WorkOrderListPage)
);
},
(err) => {
// failed
console.error(err);
this.showError("Username or password is incorrect");
})
After that the view started to respond as expected. I feel this is a bit of a hack. Can someone shed some light as to what is happening here?
Seems like you are basically using ngZone to make sure Angular knows you changed things so it will reload that part of the DOM to reflect the changes. I don't feel like it's a hack, because you are just making sure that it works as intended.
Angular 2 has some optimization features that help make your app run smoother and one of those is avoiding DOM updates whenever and wherever possible. By using zones (or ngZones) you are basically telling Angular "pay attention to this part, it changes and I need that change to be reflected in the DOM".
I've run into that sort of problem before myself and using zones is usually your best bet. Got into situations where a part of the interface would be stuck unless you touched a button or somesuch.
Another workaround (at least for range sliders) is using the AppllicationRef tick() method, which forces a DOM update. More info about it here.

Clicking the device back button closes the app instead of going back to previous page

If click any ion-item it open the desired page but if i click device back button it close the app rather than going back to previous page in android:
This is my ionic side menu:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon icon ion-android-menu" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-positive">
<h1 class="title"></h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ng-click="login()">
Login
</ion-item>
<ion-item menu-close ui-sref="app.search">
Search
</ion-item>
<ion-item menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Here is app.js :
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.search', {
url: '/search',
views: {
'menuContent': {
templateUrl: 'templates/search/default.html'
}
}
})
.state('app.search-form', {
url: '/search-form',
views: {
'menuContent': {
templateUrl: 'templates/search/search-form.html'
}
}
})
One solution I found:
$ionicHistory.nextViewOptions({
disableBack: true,
historyRoot: true
});
So when you click a button and going to next page, this will will disable back button.
The default behaviour of the back button is as follows:
Go back in history - if the history stack is empty -> exit the app.
So you should check the $state you are in, when you tap the hardware back button.
With the following code (placed in the run function of your module) you can overwrite the default behaviour. For example you can disable the app exit like this:
$ionicPlatform.registerBackButtonAction(function (event) {
if($state.current.name=="app.home"){
navigator.app.exitApp(); //<-- remove this line to disable the exit
}
else {
navigator.app.backHistory();
}
}, 100);
See the documentation for $ionicPlatform.
It is the menu-close attribute in the side menu that clears the history. You could experiment by replacing it with menu-toggle="left". That will still close the side bar but keep the history.
I ended up overriding the behaviour for the HW back key like below.
It sends the user to the starting view before exiting the app when pressing back. Note that I still use the menu-close attribute in the side menu. Also note I happen to store the start url in window.localStorage["start_view"] because it can change in my app. Hope it can help/inspire someone else with this problem.
$ionicPlatform.registerBackButtonAction(function(event) {
if ($ionicHistory.backView() == null && $ionicHistory.currentView().url != window.localStorage["start_view"]) {
// Goto start view
console.log("-> Going to start view instead of exiting");
$ionicHistory.currentView($ionicHistory.backView()); // to clean history.
$rootScope.$apply(function() {
$location.path(window.localStorage["start_view"]);
});
} else if ($ionicHistory.backView() == null && $ionicHistory.currentView().url == window.localStorage["start_view"]) {
console.log("-> Exiting app");
navigator.app.exitApp();
} else {
// Normal back
console.log("-> Going back");
$ionicHistory.goBack();
}
}, 100);
Import NavController in your app.component.ts and use below code.
import { NavController} from '#ionic/angular';
constructor( private nav: NavController ) {this.initializeApp();}
ngOnInit() {
this.plateform.backButton.subscribe(res => {
this.nav.goBack('');
});
}
One solution might be:
$ionicHistory.nextViewOptions({
disableBack: true,
historyRoot: true
});
This prevents the event from spreading, otherwise it did not work.
Code by: https://stackoverflow.com/users/5378702/andre-kreienbring
$ionicPlatform.registerBackButtonAction(function (event) {
if(condition){
navigator.app.exitApp(); //<-- remove this line to disable the exit
}
else {
navigator.app.backHistory();
}
throw "PreventBackButton";
}, 100);