首页 > 其他 > 详细

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

时间:2015-11-01 06:51:44      阅读:235      评论:0      收藏:0      [点我收藏+]

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
    ){

    }
}

 

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

原文:http://www.cnblogs.com/Answer1215/p/4926640.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!