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

https://github.com/firefirestyle/ebook_windstyle_markdown/tree/master/angular/tiny-input/app

ngModelを利用しない方は、Input Domで値を変えても、Lv.{{}}.... の部分は変更されない。
しかし、ngModelを利用すると、 Input Domで値を変えると、 Lv{{}}... の部分が変更されます。

便利!!