Добавить, изменить или удалить функции на странице - PullRequest
Новая
       8

Добавить, изменить или удалить функции на странице

0 голосов
/ 24 февраля 2019

У меня страница подписки состоит из 3 карточек, на которой при выборе каждой карточки активируется кнопка.Эта кнопка используется для редактирования или добавления элементов на страницу.когда я нажимаю на карту, кнопка активируется.поэтому, когда я нажимаю кнопку редактирования, мне нужно всплывающее окно с предупреждением для редактирования содержимого этой карты.пожалуйста, помогите .. Спасибо

HTML-код 

import { Component } from '@angular/core';
import { NavController, NavParams, AlertController, LoadingController, Loading, IonicPage } from 'ionic-angular';
import { ObsAuthService } from '../../services/obs_auth.services';
import { JobsearchPage } from '../jobsearch/jobsearch';
import { ConnectpayPage } from '../connectpay/connectpay';


@Component({
    selector: 'page-jobsub',
    templateUrl: 'jobsub.html',
    providers: [ObsAuthService]
})


export class JobsubPage {

     public category: string = "CLASSIC";
     public subscription: string = "PREMIUM";
     public option: string ="";
    //  public cardClicked: boolean = false;
     isenabled:boolean=false;
     editItem: any;
    //  public price: string ="";
    //  public p1: string = "₹100";
    //  public p2: string = "₹200";

    constructor(private nav: NavController, private auth: ObsAuthService,
        private alertCtrl: AlertController, private loadingCtrl: LoadingController,
        public navParams: NavParams) { }

    selectChange(e) {
        console.log(e);
    }

//redirect to job search page
    public free_pay(){
        this.nav.push(JobsearchPage);
    }

//proceed to payment page
    public classic_pay(){

        this.nav.push(ConnectpayPage, {option: this.category});
    }

//proceed to payment page
    public premium_pay(){
        this.nav.push(ConnectpayPage, {option: this.subscription});
    }

//to enable the edit button
    public onCardClick(){
        //  this.cardClicked = !this.cardClicked;
        this.isenabled=true;
        this.editItem()
    }

    // public add_page(){

    // }
}
page-jobsub{

.sentnc{
    color: grey;
    padding: 40px 10px;
    text-align: center;
}
.card-md {
    
    // width: calc(25% - 20px);
    font-size: 1.4rem;
    text-align: center;
    // background: rgb(192, 179, 167);
}
.cost{
    font-weight: bolder;
}
.titles{
    color: crimson;
    font-weight: bolder;
}
.add_buttn{
    // width: 15%;
    // background-color: red;
    padding: 10px 15px;
    // text-decoration-color: white;
   width: 10%;
    
}
}
<ion-header>
    <ion-navbar>
        <ion-title>SUBSCRIPTION</ion-title>
    </ion-navbar>
</ion-header>

<ion-content>
    <ion-item>
        <ion-buttons end>
            <button ion-button [disabled]="!isenabled" class="add_buttn" (click)="add_page()">Add/Edit</button>
        </ion-buttons>
    </ion-item>
    <ion-label class="sentnc">Take your desired plan to get access to our content easily</ion-label>
    <ion-row>
        <ion-col col2>
            <ion-card  (click)="onCardClick()">
                    <!-- <div *ngIf="cardClicked"></div> -->
                <ion-card-content>
                    <ion-card-title class="titles">
                        FREE
                    </ion-card-title>
                    <p>1 MONTH FREE</p>
                    <p>&nbsp;</p>
                    <p class="cost">₹0</p>
                    <p>&nbsp;</p>
                    <p>
                        <button (click)="free_pay()" ion-button color="dark" round>Choose plan</button>
                    </p>
                </ion-card-content>
            </ion-card>
        </ion-col>

        <ion-col col2>
            <ion-card (click)="onCardClick()">
                <ion-card-content>
                    <ion-card-title class="titles">
                        CLASSIC
                    </ion-card-title>
                    <p>6 MONTHS PLAN</p>
                    <p><del>₹150</del></p>
                    <p class="cost">₹100<sub>/month</sub></p>
                    <p>&nbsp;</p>
                    <p>
                        <button (click)="classic_pay()" ion-button color="dark" round>Choose plan</button>
                    </p>
                </ion-card-content>
            </ion-card>
        </ion-col>

        <ion-col>
            <ion-card (click)="onCardClick()">
                <ion-card-content>
                    <ion-card-title class="titles">
                        PREMIUM
                    </ion-card-title>
                    <p>1 YEAR PLAN</p>
                    <p><del>₹250</del></p>
                    <p class="cost">₹200<sub>/month</sub></p>
                    <p>&nbsp;</p>
                    <p>
                        <button (click)="premium_pay()" ion-button color="dark" round>Choose plan</button>
                    </p>
                </ion-card-content>
            </ion-card>
        </ion-col>
    </ion-row>
</ion-content>

1 Ответ

0 голосов
/ 07 марта 2019

Вы должны попробовать Ионный модал .

Шаг

  1. Создание модальной страницы и добавление ее в файл модуля.

  2. При редактированиищелкните по открытой модели и передайте значение параметра, которое вы хотите редактировать.

  3. Назначить параметр для ввода модальной страницы.

  4. обновить значение в базе данных

...