码迷,mamicode.com
首页 > 其他好文 > 详细

Angular双向数据绑定

时间:2020-07-04 13:18:50      阅读:70      评论:0      收藏:0      [点我收藏+]

标签:name   北京   获取   text   div   sele   city   click   mode   

一,引入模块

import {FormsModule} from "@angular/forms";

二,js中定义绑定数据

public user:any={
    username:‘‘,
    sex:‘1‘,
    cityList:[‘北京‘,‘上海‘,‘深圳‘],
    city:‘北京‘,

    hobby:[
      {
        title:‘吃饭‘,
        checked:false
      },
      {
        title:‘睡觉‘,
        checked:false
      },
      {
        title:‘敲代码‘,
        checked:false
      }
    ],
    text:‘‘
  }

三,html页面绑定

<ul>
  <li>
    <input type="text" [(ngModel)]="user.username">
  </li>
  <li>
    <input type="radio" [(ngModel)]="user.sex" value="1"><input type="radio" [(ngModel)]="user.sex" value="2"></li>
  <li>
    <select name="city" id="city" [(ngModel)]="user.city">

      <option *ngFor="let city of user.cityList" [value]="city">{{city}}</option>
    </select>
  </li>
  <li>
    <span *ngFor="let hobby of user.hobby">
      <input type="checkbox" [(ngModel)]="hobby.checked">{{hobby.title}}
    </span>
  </li>

  <li>
    <textarea name="" id="" cols="30" rows="10" [(ngModel)]="user.text"></textarea>
  </li>

  <button (click)="getUser()">获取user</button>

  {{user | json}}

</ul>

 

Angular双向数据绑定

标签:name   北京   获取   text   div   sele   city   click   mode   

原文地址:https://www.cnblogs.com/zhulei2/p/13234450.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!