AngularDart v4 select,option,radio

wp-admin

7 years ago

AngularDart v4 Sample Code,Demo

AngularDart : 4.0.0
Dart : 1.24.1

Loading…

(html)
<head>
.....
  <script defer src="main.dart" type="application/dart"></script>
  <script defer src="packages/browser/dart.js"></script>
</head>
<body>
  <my-app>Loading...</my-app>
</body>

(pubspec.yaml)
.....
environment:
  sdk: '>=1.24.0

import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';

class Pref {
  String id;
  String name;

  Pref(this.id, this.name);
}

class PrefDetail {
  String id;
  String name;
  String kencho;
  String jinko;

  PrefDetail(this.id, this.name, this.kencho, this.jinko);
}

@Component(
  selector: 'my-app',
  template: '''
  <strong>1)radio button</strong><br />
  <div *ngFor="let item of PREFS; let idx = index;">
    <label>
      <input type="radio"
         [value]="item.id"
         (change)="changePref(idx)"
         [checked]="selectedId == item.id">{{item.name}}
    </label>
  </div>
  <p>Detail</p>
  <p>Prefecture:{{select.name}},Prefectoral capital:{{select.kencho}},Population:{{select.jinko}}</p>
  <strong>2)select menu</strong><br />
  <div class="form-group">
    <select class="form-control" required
      [(ngModel)]="select2"
      (change)="select2=\$event.target.value" >
      <option value="">Select the State</option>
      <option *ngFor="let item of PREFS" [value]="item.id">{{item.name}}</option>
    </select>
  </div>
  <p>Selected：{{select2}}</p>
    ''',
  directives: const [formDirectives,CORE_DIRECTIVES],
  pipes: const [COMMON_PIPES]
)
class AppComponent {
  List<Pref> PREFS  = [
    new Pref('01','Tokyo'),
    new Pref('02','Kanagawa')
  ];
  List<PrefDetail> PREFDETAILS = [
    new PrefDetail('01','Tokyo','Shinjyuku','xxxxx'),
    new PrefDetail('02','Kanagawa','Yokohama','xxxxx')
  ];
  var select = new PrefDetail('01','Tokyo','Shinjyuku','xxxxx');
  String select2;
  String selectedId = "01";
  void changePref(num index) {
    this.select = PREFDETAILS[index];
    this.selectedId = PREFDETAILS[index].id;
  }
}


void main() {
  bootstrap(AppComponent);
}