4,500
edits
Angular 2: Difference between revisions
add multiple items
m Mhan moved page AngularJS 2 to Angular 2 without leaving a redirect |
add multiple items |
||
| Line 138: | Line 138: | ||
Tells Angular to ''bind'' this <input> to the variable '''newtitle'''. '''#newtitle''' syntax is called a ''resolve''. | Tells Angular to ''bind'' this <input> to the variable '''newtitle'''. '''#newtitle''' syntax is called a ''resolve''. | ||
---- | |||
Storing multiple items. | |||
<syntaxhighlight lang="javascript"> | |||
/// <reference path="node_modules/angular2/ts/typings/node/node.d.ts"/> | |||
/// <reference path="node_modules/angular2/typings/browser.d.ts"/> | |||
import {bootstrap} from "angular2/platform/browser"; | |||
import {Component} from "angular2/core"; | |||
class Resource { | |||
category: string; | |||
title: string; | |||
link: string; | |||
credit: number; | |||
votes: number; | |||
constructor(title: string, category: string, link: string, credit: number, votes?: number) { | |||
this.category = category; | |||
this.title = title; | |||
this.link = link; | |||
this.credit = credit; | |||
this.votes = votes || 0; | |||
} | |||
voteUp(): void { | |||
this.votes += 1; | |||
} | |||
voteDown(): void { | |||
this.votes -= 1; | |||
} | |||
} | |||
@Component({ | |||
selector: 'trainer-item', | |||
inputs: ['resource'], | |||
host: { | |||
class: 'row' | |||
}, | |||
template: ` | |||
<div class="four wide column center aligned votes"> | |||
<div class="ui statistic"> | |||
<div class="value">{{resource.votes}}</div> | |||
<div class="label"> Points</div> | |||
</div> | |||
</div> | |||
<div class="twelve wide column"> | |||
<a class="ui large header" href="{{resource.link}}">{{resource.title}}</a> | |||
<ul class="ui big horizontal list voters"> | |||
<li class="item"> | |||
<a href (click)="voteUp()"><i class="arrow up icon"></i> upvote</a> | |||
</li> | |||
<li class="item"> | |||
<a href (click)="voteDown()"><i class="arrow down icon"></i> downvote</a> | |||
</li> | |||
</ul> | |||
</div> | |||
` | |||
}) | |||
class ResourceComponent { | |||
resource: Resource; | |||
voteUp(): boolean { | |||
this.resource.voteUp(); | |||
return false; | |||
} | |||
voteDown(): boolean { | |||
this.resource.voteDown(); | |||
return false; | |||
} | |||
} | |||
@Component({ | |||
selector: 'trainer', | |||
directives: [ResourceComponent], | |||
template: ` | |||
<form class="ui large form segment"> | |||
<h3 class="ui header">Add a Resource</h3> | |||
<div class="field"> | |||
<label for="title">Title:</label> | |||
<input type="text" name="title" #newtitle> | |||
</div> | |||
<div class="field"> | |||
<label for="category">Category:</label> | |||
<input type="text" name="category" #newcategory> | |||
</div> | |||
<div class="field"> | |||
<label for="link">Link:</label> | |||
<input type="url" name="link" #newlink> | |||
</div> | |||
<div class="field"> | |||
<label for="credit">Credit:</label> | |||
<input type="number" name="credit" #newcredit> | |||
</div> | |||
<button (click)="addResource(newtitle,newcategory,newlink,newcredit)" class="ui positive right floated button">Submit resource</button> | |||
</form> | |||
<div class="ui grid posts"> | |||
<trainer-item *ngFor="#resource of resources" [resource]="resource"></trainer-item> | |||
</div> | |||
` | |||
}) | |||
class TrainerApp { | |||
resources: Resource[]; | |||
constructor() { | |||
this.resources = [ | |||
new Resource('Chapter 1','Angular 2','http://angular.io',3,10), | |||
new Resource('Chapter 2','Angular 2','http://angular.io',3,10), | |||
new Resource('Chapter 3','Angular 2','http://angular.io',3,10), | |||
]; | |||
} | |||
addResource(title: HTMLInputElement, category: HTMLInputElement, link: HTMLInputElement, credit: HTMLInputElement): void { | |||
console.log(`Adding resource -- title: ${title.value}, category: ${category.value}, link: ${link.value}, credit: ${credit.value}`); | |||
} | |||
} | |||
bootstrap(TrainerApp); | |||
</syntaxhighlight> | |||