\r\n\r\n
\r\n(html)\r\n<head>\r\n.....\r\n <script defer src=\"main.dart\" type=\"application\/dart\"><\/script>\r\n <script defer src=\"packages\/browser\/dart.js\"><\/script>\r\n<\/head>\r\n<body>\r\n <my-app>Loading...<\/my-app>\r\n<\/body>\r\n\r\n(pubspec.yaml)\r\n.....\r\nenvironment:\r\n sdk: '>=1.24.0 <2.0.0'\r\ndependencies:\r\n angular: ^4.0.0\r\n angular_forms: ^1.0.0\r\n angular_router: ^1.0.2\r\n http: ^0.11.0\r\n stream_transform: ^0.0.6\r\n\r\ndev_dependencies:\r\n angular_test: ^1.0.0\r\n browser: ^0.10.0\r\n dart_to_js_script_rewriter: ^1.0.1\r\n mockito: ^2.0.2\r\n test: ^0.12.21\r\n\r\ntransformers:\r\n- angular:\r\n entry_points:\r\n - web\/main.dart\r\n - test\/**_test.dart\r\n- test\/pub_serve:\r\n $include: test\/**_test.dart\r\n- dart_to_js_script_rewriter\r\n<\/pre>\r\n\r\n <\/div>\r\n\r\n \r\n
\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:angular_forms\/angular_forms.dart';\r\n\r\nclass Pref {\r\n String id;\r\n String name;\r\n\r\n Pref(this.id, this.name);\r\n}\r\n\r\nclass PrefDetail {\r\n String id;\r\n String name;\r\n String kencho;\r\n String jinko;\r\n\r\n PrefDetail(this.id, this.name, this.kencho, this.jinko);\r\n}\r\n\r\n@Component(\r\n selector: 'my-app',\r\n template: '''\r\n <strong>1)radio button<\/strong><br \/>\r\n <div *ngFor=\"let item of PREFS; let idx = index;\">\r\n <label>\r\n <input type=\"radio\"\r\n [value]=\"item.id\"\r\n (change)=\"changePref(idx)\"\r\n [checked]=\"selectedId == item.id\">{{item.name}}\r\n <\/label>\r\n <\/div>\r\n <p>Detail<\/p>\r\n <p>Prefecture:{{select.name}},Prefectoral capital:{{select.kencho}},Population:{{select.jinko}}<\/p>\r\n <strong>2)select menu<\/strong><br \/>\r\n <div class=\"form-group\">\r\n <select class=\"form-control\" required\r\n [(ngModel)]=\"select2\"\r\n (change)=\"select2=\\$event.target.value\" >\r\n <option value=\"\">Select the State<\/option>\r\n <option *ngFor=\"let item of PREFS\" [value]=\"item.id\">{{item.name}}<\/option>\r\n <\/select>\r\n <\/div>\r\n <p>Selected\uff1a{{select2}}<\/p>\r\n ''',\r\n directives: const [formDirectives,CORE_DIRECTIVES],\r\n pipes: const [COMMON_PIPES]\r\n)\r\nclass AppComponent {\r\n List<Pref> PREFS = [\r\n new Pref('01','Tokyo'),\r\n new Pref('02','Kanagawa')\r\n ];\r\n List<PrefDetail> PREFDETAILS = [\r\n new PrefDetail('01','Tokyo','Shinjyuku','xxxxx'),\r\n new PrefDetail('02','Kanagawa','Yokohama','xxxxx')\r\n ];\r\n var select = new PrefDetail('01','Tokyo','Shinjyuku','xxxxx');\r\n String select2;\r\n String selectedId = \"01\";\r\n void changePref(num index) {\r\n this.select = PREFDETAILS[index];\r\n this.selectedId = PREFDETAILS[index].id;\r\n }\r\n}\r\n\r\n\r\nvoid main() {\r\n bootstrap(AppComponent);\r\n}\r\n<\/pre>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n