AngularDart v4 ng-if,[style.display],[hidden]

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 Member {
  String name;
  int age;
  bool age_v;
  String address;
  bool address_v;
 
  Member(this.name,this.age,this.age_v,this.address,this.address_v);
}

@Component(
  selector: 'my-app',
  styles: const [
    '''
    .detail > *:first-child {font-weight: bold}
    '''
  ],
  template: '''
<strong>1)ng-if</strong><br />
  <br />
  <div class="checkbox">
    <label>
      <input type="checkbox" [(ngModel)]="detail" />Detail
    </label>
  </div>
  <ul>
    <li *ngFor="let member of members">{{member.name}}
      <div *ngIf="detail">
        <ul>
          <li>age:{{member.age}}</li>
          <li>address:{{member.address}}</li>
        </ul>
      </div>
    </li>
  </ul>
<strong>２）[style.display],[hidden]</strong><br/>
  <br />
  <ul>
    <li *ngFor="let member of members">{{member.name}}
      <ul class="detail">
        <li [style.display]="member.age_v ? 'list-item' : 'none'">age:{{member.age}}</li>
        <li [hidden]="member.address_v">address:{{member.address}}</li>
      </ul>
    </li>
  </ul>
    ''',
  directives: const [formDirectives,CORE_DIRECTIVES]
)
class AppComponent {
  List<Member> members = [
    new Member('John',20,true,'1st Ave Seattle WA',false),
    new Member('Jessie',55,false,'2nd Ave Seattle WA',true),
    new Member('Peter',20,true,'Mercer St Seattle WA',true),
    new Member('Erika',37,false,'Alaskan Way Seattle WA',false)
  ];
  bool detail;
}

void main() {
  bootstrap(AppComponent);
}