首页 > 其他 > 详细

Angular双向数据绑定

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

一,引入模块

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双向数据绑定

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

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