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

user input formatting

This commit is contained in:
Alex Wolfe 2015-04-22 07:21:09 -07:00
parent b66786ed55
commit 345a013156
1 changed files with 99 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
public/docs/js/latest/guide/user-input.jade
View File

@ -1,11 +1,11 @@
.statement
h4 Live Examples
p.
If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/htvpvg2RxemT2W0mYu0y?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/sjRKtQd10ARLM2GTsQKi?p=preview> ES5 Example</a>.
If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/htvpvg2RxemT2W0mYu0y?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/sjRKtQd10ARLM2GTsQKi?p=preview'> ES5 Example</a>.
.l-main-section
h2#section-responding-to-user-input Responding to user input with event syntax
p.
You can make your application respond to user input by using the event syntax. The event syntax starts with an event name surrounded by parenthesis: <code>(event)</code>. A controller function is then assigned to the event name: <code>(event)="controllerFn()"</code>.
p.
@ -14,7 +14,7 @@
pre.prettyprint.lang-html
code.
&lt;input (keyup)="myControllerMethod()"&gt;
h3#local-variables Local variables
p.
As in previous examples, you can make element references available to other parts of the template as a local
@ -31,7 +31,7 @@
event. And the <code>{{myname.value}}</code> binds the text node of the <code>&lt;p&gt;</code> element to the
input's value property.
p Let's do something a little more complex where users enter items and add them to a list like this:
div(align='center')
figure.image-display
img(src='user-input-example1.png')
@ -42,28 +42,29 @@
list. Inside the controller, add an array with an initial list of items. Then add a method that pushes new items
on the array when called.
pre.prettyprint.linenums.lang-javascript
code.
//ES5
function TodoList() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
this.addTodo = function(todo) {
this.todos.push(todo);
};
}
pre.prettyprint.linenums.lang-typescript
code.
//TypeScript
class TodoList {
todos: Array&lt;string&gt;
constructor() {
.code-box
pre.prettyprint.linenums.lang-javascript(data-name="es5")
code.
//ES5
function TodoList() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
this.addTodo = function(todo) {
this.todos.push(todo);
};
}
addTodo(todo: string) {
this.todos.push(todo);
pre.prettyprint.linenums.lang-typescript(data-name="typescript")
code.
//TypeScript
class TodoList {
todos: Array&lt;string&gt;
constructor() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
}
addTodo(todo: string) {
this.todos.push(todo);
}
}
}
.callout.is-helpful
header Production Best Practice
@ -116,83 +117,84 @@
.l-main-section
h2#section-final-code Final Code
pre.prettyprint.lang-javascript
code.
//ES5
function TodoList() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
this.addTodo = function(todo) {
this.todos.push(todo);
};
this.doneTyping = function($event) {
if($event.which === 13) {
this.addTodo($event.target.value);
$event.target.value = null;
}
}
}
TodoList.annotations = [
new angular.Component({
selector: "todo-list"
}),
new angular.View({
template:
'&lt;ul&gt;' +
'&lt;li *for="#todo of todos">' +
'{{ todo }}' +
'&lt;/li&gt;' +
'&lt;/ul&gt;' +
'&lt;input #textbox (keyup)="doneTyping($event)">' +
'&lt;button (click)="addTodo(textbox.value)"&gt;Add Todo&lt;/button&gt;',
directives: [angular.For, angular.If]
})
];
document.addEventListener("DOMContentLoaded", function() {
angular.bootstrap(TodoList);
});
pre.prettyprint.lang-typescript
code.
//TypeScript
import {Component, View, bootstrap, For, If} from 'angular2/angular2';
@Component({
selector: 'todo-list'
})
@View({
template: `
&lt;ul&gt;
&lt;li *for="#todo of todos"&gt;
{{ todo }}
&lt;/li&gt;
&lt;/ul&gt;
&lt;input #todotext (keyup)="doneTyping($event)"&gt;
&lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
`,
directives: [For, If]
})
class TodoList {
todos: Array<string>;
constructor() {
.code-box
pre.prettyprint.lang-javascript(data-name="es5")
code.
//ES5
function TodoList() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
}
addTodo(todo: string) {
this.todos.push(todo);
}
this.addTodo = function(todo) {
this.todos.push(todo);
};
doneTyping($event) {
if($event.which === 13) {
this.addTodo($event.target.value);
$event.target.value = null;
this.doneTyping = function($event) {
if($event.which === 13) {
this.addTodo($event.target.value);
$event.target.value = null;
}
}
}
}
bootstrap(TodoList);
TodoList.annotations = [
new angular.Component({
selector: "todo-list"
}),
new angular.View({
template:
'&lt;ul&gt;' +
'&lt;li *for="#todo of todos">' +
'{{ todo }}' +
'&lt;/li&gt;' +
'&lt;/ul&gt;' +
'&lt;input #textbox (keyup)="doneTyping($event)">' +
'&lt;button (click)="addTodo(textbox.value)"&gt;Add Todo&lt;/button&gt;',
directives: [angular.For, angular.If]
})
];
document.addEventListener("DOMContentLoaded", function() {
angular.bootstrap(TodoList);
});
pre.prettyprint.lang-typescript(data-name="typescript")
code.
//TypeScript
import {Component, View, bootstrap, For, If} from 'angular2/angular2';
@Component({
selector: 'todo-list'
})
@View({
template: `
&lt;ul&gt;
&lt;li *for="#todo of todos"&gt;
{{ todo }}
&lt;/li&gt;
&lt;/ul&gt;
&lt;input #todotext (keyup)="doneTyping($event)"&gt;
&lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
`,
directives: [For, If]
})
class TodoList {
todos: Array<string>;
constructor() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
}
addTodo(todo: string) {
this.todos.push(todo);
}
doneTyping($event) {
if($event.which === 13) {
this.addTodo($event.target.value);
$event.target.value = null;
}
}
}
bootstrap(TodoList);