2017年1月20日金曜日

AngularDart のチュートリアルを試してみた。 ngModel

前回の通り、AngularDartだとデータを紐づけるのが簡単。
で、Html側で値を変更するようなシナリオがあった場合は、ngModelを利用すると
良いですよ的な事が、Angular Dart の Tutorial に書かれていた。



import 'package:angular2/platform/browser.dart';
import 'package:angular2/core.dart';

void main() {
  bootstrap(AppComponent);
}

class Monster {
  int id;
  String name;
  int lv;
  Monster({this.id:0,this.name:"slime",this.lv:1});
}

@Component(
    selector: "my-app",
    template: """
      <div>Lv. {{monster.lv}} 's {{monster.name}} </div>
      <div> <label>mode name </label><input value={{monster.name}}></div>
      <div> <label>mode name ngmodel</label><input [(ngModel)]="monster.name"></div>
    """)
class AppComponent {
  Monster monster = new Monster();
}
ngModelを利用しない方は、Input Domで値を変えても、Lv.{{}}.... の部分は変更されない。
しかし、ngModelを利用すると、 Input Domで値を変えると、 Lv{{}}... の部分が変更されます。

便利!!


0 件のコメント:

コメントを投稿

mbedtls dart の 開発を始めた web wasm ffi io flutter

C言語 で開発した機能を、Dart をターゲットとして、Web でも サーバーでも、そして Flutter  でも使えるようにしたい。 そこで、mbedtls の 暗号化の部分を Dart 向けのPackageを作りながら、 実現方法を試行錯誤する事にした。 dart...