AngularDart v4 Pagination

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 Friend {
  int id;
  String name;
  int age;
  String address;
  
  Friend(this.id,this.name,this.age,this.address);
}

@Component(
  selector: 'my-app',
  template: '''
<form class="form-inline">
  <div class="form-group">
    <label>Items Per Page:</label>
    <input [(ngModel)]="itemsPerPage" type="number">
  </div>
</form>
<table class="table table-striped">
  <thead>
    <tr>
      <th>№</th><th>Name</th><th>Age</th><th>Address</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of friends | slice:(currentPage-1)*conv(itemsPerPage):currentPage*conv(itemsPerPage)">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.age}}</td>
      <td>{{item.address}}</td>
    </tr>
  </tbody>
  <tfoot>
    <td colspan="4">
      <ul class="pagination">
        <li [ngClass]="prevPageDisabled()">
          <a href="#step2" (click)="prevPage()">≪ Prev</a>
        </li>
        <li *ngFor="let n of range()" 
            [ngClass]="{active: n === currentPage}" 
            (click)="setPage(n)">
          <a href="#step2">{{n}}</a>
        </li>
        <li [ngClass]="nextPageDisabled()">
          <a href="#step2" (click)="nextPage()">Next ≫</a>
        </li>
      </ul>
    </td>
  </tfoot>
</table>
    ''',
  directives: const [CORE_DIRECTIVES, formDirectives],
  pipes: const [COMMON_PIPES]
)
class AppComponent {
  List<Friend> friends = [
    new Friend(1,'John',20,'1st Ave Seattle WA'),
    new Friend(2,'Jessie',55,'2nd Ave Seattle WA'),
    new Friend(3,'Peter',20,'Mercer St Seattle WA'),
    new Friend(4,'Erika',37,'Alaskan Way Seattle WA'),
    new Friend(5,'Tom',20,'Abcd St Seattle WA'),
    new Friend(6,'Richard',32,'Xyza Way Seattle WA'),
    new Friend(7,'Ron',20,'11st Ave Seattle WA'),
    new Friend(8,'Herold',55,'22nd Ave Seattle WA'),
    new Friend(9,'Scott',20,'Nercer St Seattle WA'),
    new Friend(10,'Brian',37,'Olaskan Way Seattle WA'),
    new Friend(11,'Emily',20,'Ubcd St Seattle WA')
  ];
  int itemsPerPage = 3;
  int currentPage = 1;
  int _maxPage;
  int i;
  int conv(idx) {
    if (idx is String) {
      this.i = int.parse(idx);
    } else if (idx == null) {
      this.i = 1;
    } else {
      this.i = idx;
    }
    return this.i;
  }
  List range() {
    this._maxPage = (this.friends.length/conv(this.itemsPerPage)).ceil();
    List ret = [];
    for (var i=1; i<=this._maxPage; i++) {
      ret.add(i);
    }
    return ret;
  }
  void setPage(n) {
    this.currentPage = n;
  }
  void prevPage() {
    if (this.currentPage > 1) {
      --this.currentPage;
    }
  }
  void nextPage() {
    if (this.currentPage < this._maxPage) {
      ++this.currentPage;
    }
  }
  String prevPageDisabled() {
    return this.currentPage == 1 ? "disabled" : "";
  }
  String nextPageDisabled() {
    return this.currentPage == this._maxPage ? "disabled" : "";
  }
}

void main() {
  bootstrap(AppComponent);
}