javascript - 如何将数据从模型发送到屏幕？

Question

我想使用模型添加 Todo。当我单击 Add todo 按钮(底部)时。它会打开模型。我需要在输入字段中输入的任何内容，它应该添加到列表中。

那么如何将输入字段数据发送到屏幕或页面。我想在模型和屏幕/页面之间共享数据。如何使用模型在列表中添加项目？

这是我的代码

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();
  }
}

如何在列表中设置数据..？如何更新 todo 数组？

Answer 1

您要解决的问题实际上是如何将数据从模态传递回显示它的页面，使用模态的功能有一个简单的解决方案。

这些对你的 plunker 的小改动会按照你的意图工作，不需要 Hook 事件。

在你的 home.ts 上:

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

      })
    this.nav.present(modal)
    }

在你的 mymodel.ts 上:

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

当您关闭模式时，它会将值 v 传回您的主页。您的主页在 onDismiss 回调中捕获数据，并将其添加到 todo 数组。

编辑: 正在工作的 plunker:http://plnkr.co/edit/iKIfFYYoJolPkDgx2pxT?p=preview