honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(samples): add Dart version of forms example 

closes #350
This commit is contained in:
Tom Ingebretsen 2015-11-04 21:12:30 -07:00 committed by Kathy Walrath
parent 28386efb50
commit c46892afa9
8 changed files with 121 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/docs/_examples/forms/dart/lib/hero.dart Normal file
View File

@ -0,0 +1,13 @@
library hero_form.hero;
class Hero {
int number;
String name;
String power;
String alterEgo;
Hero(this.number, this.name, this.power, {this.alterEgo});
Map toJson() =>
{'number': number, 'name': name, 'power': power, 'alterEgo': alterEgo};
}

27
public/docs/_examples/forms/dart/lib/hero_form_component.dart Normal file
View File

@ -0,0 +1,27 @@
library hero_form.hero_form_component;
import 'package:angular2/angular2.dart';
import 'package:hero_form/hero.dart';
const List<String> _powers = const [
'Really Smart',
'Super Flexible',
'Super Hot',
'Weather Changer'
];
@Component(selector: 'hero-form')
@View(
templateUrl: 'hero_form_component.html',
directives: const [CORE_DIRECTIVES, FORM_DIRECTIVES])
class HeroFormComponent {
List<String> get powers => _powers;
bool submitted = false;
Hero model = new Hero(18, 'Dr IQ', _powers[0], alterEgo: 'Chuck Overstreet');
onSubmit() {
submitted = true;
}
}

42
public/docs/_examples/forms/dart/lib/hero_form_component.html Normal file
View File

@ -0,0 +1,42 @@
<div class="container" [hidden]="submitted">
{{model.toJson()}}
<h1>Hero Form</h1>
<form (ng-submit)="onSubmit()" #hf="form">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" required [(ng-model)]="model.name" ng-control="name" #name="form" >
<div [hidden]="name.valid" class="alert alert-danger">
Name is required
</div>
</div>
<div class="form-group">
<label for="alterEgo">Alter Ego</label>
<input type="text" class="form-control" [(ng-model)]="model.alterEgo" ng-control="alterEgo" >
</div>
<div class="form-group">
<label for="power">Hero Power</label>
<select class="form-control" required [(ng-model)]="model.power" ng-control="power" >
<option *ng-for="#p of powers" [value]="p">{{p}}</option>
</select>
</div>
<button type="submit" class="btn btn-default" [disabled]="!hf.form.valid">Submit</button>
</form>
</div>
<div [hidden]="!submitted">
<h2>You submitted the following:</h2>
<div class="row">
<div class="col-xs-3">Name</div>
<div class="col-xs-9 pull-left">{{ model.name }}</div>
</div>
<div class="row">
<div class="col-xs-3">Alter Ego</div>
<div class="col-xs-9 pull-left">{{ model.alterEgo }}</div>
</div>
<div class="row">
<div class="col-xs-3">Power</div>
<div class="col-xs-9 pull-left">{{ model.power }}</div>
</div>
<br>
<button class="btn btn-default" (click)="submitted=false">Edit</button>
</div>

9
public/docs/_examples/forms/dart/pubspec.yaml Normal file
View File

@ -0,0 +1,9 @@
name: hero_form
description: Form example
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.45
browser: ^0.10.0
transformers:
- angular2:
entry_points: web/main.dart

5
public/docs/_examples/forms/dart/web/bootstrap.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

13
public/docs/_examples/forms/dart/web/index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>Displaying Data</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
<script async src="main.dart" type="application/dart"></script>
<script async src="packages/browser/dart.js"></script>
</head>
<body>
<hero-form></hero-form>
</body>
</html>

6
public/docs/_examples/forms/dart/web/main.dart Normal file
View File

@ -0,0 +1,6 @@
import 'package:angular2/bootstrap.dart';
import 'package:hero_form/hero_form_component.dart';
main() {
bootstrap(HeroFormComponent);
}

6
public/docs/_examples/forms/dart/web/styles.css Normal file
View File

@ -0,0 +1,6 @@
.ng-valid[required] {
border-left: 5px solid #42A948; /* green */
}
.ng-invalid {
border-left: 5px solid #a94442; /* red */
}