[Angular 2] ng-model and ng-for with Select and Option elements

You can use Select and Option elements in combination with ng-for and ng-model to create mini-forms that change your data as you make a selection.

 

/**
 * Created by wanzhen on 23.10.2015.
 */
import {Component, View, NgFor, FORM_DIRECTIVES} from 'angular2/angular2';
import {TodoService} from './todoService';
import {TodoItemRender} from './todoItemRender';
import {StartsWith} from './startsWith';

@Component({
    selector: 'todo-list'
})
@View({
    pipes: [StartsWith],
    directives: [NgFor, TodoItemRender, FORM_DIRECTIVES],
    template: `
          <div>
                <todo-item-render
                    *ng-for="#todo of todoService.todos | startsWith:'title':selectedLetter"
                    [todoinput]="todo"
                >
                </todo-item-render>
                <select [(ng-model)]="selectedLetter">
                    <option *ng-for="#letter of letters">{{letter}}</option>
                </select>
          </div>
    `
})

export class TodoList{
    letters: string[] = ['e', 's', 'w'];
    selectedLetter: string = 'e';
    constructor(
        public todoService:TodoService
    ){

    }
}