angular-cn/public/docs/js/latest/guide/user-input.jade

186 lines
6.4 KiB
Plaintext
Raw Normal View History

2015-04-22 08:42:47 -04:00
.l-main-section
2015-04-22 09:03:21 -04:00
h2#section-responding-to-user-input Responding to user input with event syntax
2015-04-22 10:21:09 -04:00
p.
2015-04-22 09:03:21 -04:00
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.
For a particular control like an input you can have it call methods on your controller on keyup event like so:
code-example(language="html").
&lt;input (keyup)="myControllerMethod()"&gt;
2015-04-22 10:21:09 -04:00
2015-04-22 09:03:21 -04:00
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
2015-04-22 08:25:15 -04:00
variable using the <code>#var</code> syntax. With this and events, we can do the old "update text as you type" example:
code-example(language="html").
&lt;input #myname (keyup)&gt;
&lt;p&gt;{{myname.value}}&lt;/p&gt;
p.text-body(ng-non-bindable).
2015-04-22 08:25:15 -04:00
The <code>#myname</code> creates a local variable in the template that we'll refer to below in the
<code>&lt;p&gt;</code> element. The <code>(keyup)</code> tells Angular to trigger updates when it gets a keyup
2015-04-22 08:25:15 -04:00
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:
2015-05-26 09:29:27 -04:00
2015-04-22 10:21:09 -04:00
figure.image-display
2015-05-26 09:29:27 -04:00
img(src='/resources/images/examples/user-input-example1.png' alt="Example of Todo App")
2015-04-22 08:25:15 -04:00
.l-ain-section
h2#section-create-an-array-property Create an array property
p.
2015-04-22 08:25:15 -04:00
With the default bootstrapping in place, create a controller class that will manage interactions with the
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.
code-tabs
code-pane(language="javascript" name="TypeScript" format="linenums").
//TypeScript
class TodoList {
todos: Array&lt;string&gt;;
constructor() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
}
addTodo(todo: string) {
this.todos.push(todo);
}
}
code-pane(language="javascript" name="ES5" format="linenums").
//ES5
function TodoList() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
this.addTodo = function(todo) {
this.todos.push(todo);
};
}
.callout.is-helpful
header Production Best Practice
p.
As with the previous example, in a production application you will separate your model out into another class
2015-04-22 08:25:15 -04:00
and inject it into <code>TodoList</code>. We've omitted it here for brevity.
.l-main-section
h2#section-display-the-list-of-todos Display the list of todos
p.
Using the <code>*for</code> iterator, create an <code>&lt;li&gt;</code> for each item in the todos array and set
its text to the value.
code-example(language="html" format="linenums").
&lt;ul&gt;
&lt;li *for=&quot;#todo of todos&quot;&gt;
{{ todo }}
&lt;/li&gt;
&lt;/ul&gt;
.l-main-section
h2#section-add-todos-to-the-list Add todos to the list via button click
p.
Now, add a text input and a button for users to add items to the list. As you saw above, you can create a local
variable reference in your template with <code>#varname</code>. Call it <code>#todotext</code> here.
code-example(language="html" format="linenums").
&lt;input #todotext&gt;
p.
Lastly, specify the target of the click event binding as your controller's <code>addTodo()</code> method and pass
it the value. Since you created a reference called <code>todotext</code>, you can get the value with
2015-04-22 09:03:21 -04:00
<code>todotext.value.</code>
code-example(language="html" format="linenums").
&lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
2015-04-22 08:25:15 -04:00
p And then create the <code>doneTyping()</code> method on TodoList and handle adding the todo text.
code-example(language="javascript" format="linenums").
doneTyping($event) {
if($event.which === 13) {
this.addTodo($event.target.value);
$event.target.value = null;
}
}
.l-main-section
h2#section-final-code Final Code
code-tabs
code-pane(language="javascript" name="TypeScript" format="linenums").
//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&lt;string&gt;;
constructor() {
2015-04-22 10:21:09 -04:00
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
}
2015-04-22 10:21:09 -04:00
addTodo(todo: string) {
this.todos.push(todo);
}
2015-04-22 10:21:09 -04:00
doneTyping($event) {
if($event.which === 13) {
this.addTodo($event.target.value);
$event.target.value = null;
}
}
}
bootstrap(TodoList);
code-pane(language="javascript" name="ES5" format="linenums").
//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.ComponentAnnotation({
selector: "todo-list"
}),
new angular.ViewAnnotation({
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);
});