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

.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>.

.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.
    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.
      &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
    variable using the <code>#var</code> syntax.  With this and events, we can do the old "update text as you type" example:

  pre.prettyprint.lang-html
    code.
      &lt;input #myname (keyup)&gt;
      &lt;p&gt;{{myname.value}}&lt;/p&gt;

  p.text-body(ng-non-bindable).
    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
    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:
  figure.image-display
      img(src='user-input-example1.png')


.l-ain-section
  h2#section-create-an-array-property Create an array property
  p.
    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-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);
          };
        }

    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
  p.
      As with the previous example, in a production application you will separate your model out into another class
      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.

  pre.prettyprint.linenums.lang-html
    code.
      &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.

  pre.prettyprint.lang-html
    code.
      &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
    <code>todotext.value.</code>

  pre.prettyprint.lang-html
    code.
        &lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;

  p And then create the <code>doneTyping()</code> method on TodoList and handle adding the todo text.

  pre.prettyprint.lang-javascript
    code.
      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-box
    pre.prettyprint.lang-javascript(data-name="es5")
      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(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);