user944513 user944513 - 6 months ago 25
AngularJS Question

how to send data from model to screen?

I want to add Todo using model .When I click

Add todo
button (bottom one)..It open the model .I need whatever I type in input field it shoud add in list ..

so how to send inputfield data to screen or page .I want share data between model and screen/page ..How to add item in list using model ?

here is my code

http://plnkr.co/edit/N6aXDZXUr99MC6w77H6d?p=preview

import { Page ,ViewController} from 'ionic-angular/index';

@Page({
template: `
<ion-content padding>
<h2>Add Todo!</h2>
<input type='text' placeholder='Enter todo'>
<button (click)="add()">ADD</button>
<button (click)="close()">Close</button>
</ion-content>`
})
export class MyModal {
constructor(viewCtrl: ViewController) {
this.viewCtrl = viewCtrl;
}

close() {
this.viewCtrl.dismiss();
}
add(v){
alert(v.value);
v.value='';
this.viewCtrl.dismiss();
}
}


how to set data on list ..? how to update todo array ?

Answer

The problem you are trying to solve is really how to pass data back from a modal to the page that presented it, which has a straightforward solution using modal's functionality.

These small changes to your plunker work as you intend, with no need to hook events.

On your home.ts :

showModel(){
      let modal = Modal.create(MyModal);
        modal.onDismiss(data => {
        this.addItem(data);

      })
    this.nav.present(modal)
    }

on your mymodel.ts :

  add(v){
    alert(v.value);
    this.viewCtrl.dismiss(v);
  }

When you dismiss the modal, it passes back the value v to your home page. Your home page captures the data in the onDismiss callback, and adds it to the todo array.

edit: the working plunker: http://plnkr.co/edit/iKIfFYYoJolPkDgx2pxT?p=preview

Comments