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

.l-main-section

  .callout.is-helpful
    header 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>.
          
  p.
    You can make your application respond to user input by associating events with functions in your controller
    using the event syntax using <code>(event)</code> 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.
      &lt;input (keyup)="myControllerMethod()"&gt;
  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:
  div(align='center')
      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.

  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() {
          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.domElement.value.</code>

  pre.prettyprint.lang-html
    code.
        &lt;button (click)="addTodo(todotext.domElement.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

  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.domElement.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.domElement.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);