angularjs 八

import {Component} from 'angular2/core';
import {StudentFormComponent } from './student-form'

@Component({
    selector: 'appTest',template: '<student-form></student-form>',directives: [StudentFormComponent ]
})

export class App {

}  

/**
 * Created by dell on 2016/9/8.
 */

import {Component} from 'angular2/core';
import {NgForm}    from 'angular2/common';
import { Student}    from './student';

@Component({
    selector: 'student-form',templateUrl: 'app/student-form.html'
})

export class StudentFormComponent {
    studentList:Student[] = [];
    student= new Student('马云',25,"北京市花神街39号");

    get studentInfo() {
        return JSON.stringify(this.student);
    }

    onSubmit(): void {
        this.studentList.push(this.student);
    }
}

<h1>This is A Student Data!</h1>
<p>StudentInfo: {{studentInfo}}</p>
<div *ngFor="#stu of studentList">
    <span>{{stu.name}}</span>
</div>
<h1>Student Form</h1>
<form (ngSubmit)="onSubmit(studentForm.value)" #studentForm="ngForm">
    <div >
        <label>名字</label>
        <input type="text"  required [(ngModel)]="student.name" >
    </div>
    <div>
        <label>年龄</label>
        <input type="text" required  [(ngModel)]="student.age" >
    </div>
    <div>
        <label>住址</label>
        <input type="text"  [(ngModel)]="student.address" >
    </div>
    <button type="submit">Submit</button>
</form>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!