Angular系列 -> 在 input、checkbox、radio、textarea 、select实现双向数据绑定

     双向数据绑定是Angular 项目中一大特点，它属于MVVM模式，即Model 改变，影响视图，视图内容改变，反过来影响Model；其底层实现机制，就是将属性绑定和事件绑定绑定相结合。下面介绍双向数据绑定在input、checkbox、radio、textarea 标签的实现方式。
     input:

<!-- input -->

<li>姓名： <input class="form_input" type="text"  [(ngModel)]="peopleInfo.name"   /></li>

     radio:

        <!-- radio -->
        <li>性别：
            <input type="radio" value="male" name="male" id="male" [(ngModel)]="peopleInfo.gender" /><label for="male">男</label>
            <input type="radio" value="female" name="female" id="female" [(ngModel)]="peopleInfo.gender" /><label for="female">女</label>
        </li>

     checkbox:

        <!-- checkbox -->
        <li>爱好：
            <span *ngFor="let item of peopleInfo.hobby; let key=index">
                <input type="checkbox" [(ngModel)]="item.checked" [id]="'check_' + key" />
                <label [for]="'check_' + key">{{item.title}}</label>
                &nbsp;&nbsp;
            </span>
        </li>

     textarea :

        <!-- textarea -->
        <li>备注：
            <br>
            <textarea name="comments" id="comments" cols="30" rows="3" [(ngModel)]="peopleInfo.comments"></textarea>
        </li>

     select:

        <!-- select --> 
        <li>城市： 
            <select [(ngModel)]="peopleInfo.city" autocomplete="off">
                <!-- 设置默认选项 -->
                <option disabled hidden selected  value="">Select</option> 
                <option *ngFor="let city of cities" [value]="city">{{city}}</option>
            </select>
        </li>

 

      特此声明： 以上内容是根据大地老师的教学视频做的笔记，以及结合了之前的一些理解， 非常感谢~