75 lines
2.9 KiB
Plaintext
75 lines
2.9 KiB
Plaintext
.l-main-section
|
|
p.
|
|
<strong>Mission:</strong> By the end of this chapter, you should be able to add to a list on a page when a
|
|
button is clicked and update the text displayed when the user types into a textbox.
|
|
.l-sub-section
|
|
h3#section-examples Examples:
|
|
ul
|
|
li
|
|
a(href='') TypeScript
|
|
li
|
|
a(href='') ES5
|
|
p.
|
|
You can make your application respond to user input by associating events with functions in your controller
|
|
using the event syntax using <strong>()</strong> to surround the name of an event.
|
|
p.
|
|
For a particular control like an input you can have it call methods on your controller on keyup event like so:
|
|
|
|
pre.prettyprint.lang-html
|
|
code.
|
|
<input (keyup)="myControllerMethod()">
|
|
p.
|
|
As in previous examples, you can make element references available to other parts of the template as a local
|
|
variable using the # syntax. With this and events, we can do the old "update text as you type" example:
|
|
|
|
pre.prettyprint.lang-html
|
|
code.
|
|
<input #myname (keyup)>
|
|
<p>{{myname.value}}</p>
|
|
|
|
p.text-body(ng-non-bindable).
|
|
The <code>#my-name</code> creates a local variable in the template that we'll refer to below in the
|
|
<code><p></code> element. The <code>(keyup)</code> tells Angular to trigger updates when it gets a keyup
|
|
event. And the <code>{{my-name.value}}</code> binds the text node of the <code><p></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')
|
|
img(src='user-input-example1.png')
|
|
|
|
|
|
.l-main-section
|
|
h2#section-create-an-array-property Create an array property
|
|
p.
|
|
With the default bootstrapping in place, create a TodoController class that will manage interactions with the
|
|
list. Inside TodoController, add an array with an initial list of items. Then add a method that pushes new items
|
|
on the array when called.
|
|
|
|
aside.is-right.
|
|
As with the previous example, in a production application you will separate your model out into another class
|
|
and inject it into TodoController. We've omitted it here for brevity.
|
|
|
|
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<string>;
|
|
constructor() {
|
|
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
|
|
}
|
|
addTodo(todo: string) {
|
|
this.todos.push(todo);
|
|
}
|
|
}
|
|
|
|
|