1.ts

public peopleInfo: any = {
username: 'kxy',
sex: '男',
cityList: ['汕头', '广州', '茂名'],
city: '汕头',
hobby: [
{
title: '吃饭',
checked: false
},
{
title: '睡觉',
checked: false
},
{
title: '打豆豆',
checked: true
}
],
mark: ''
}; output() {
console.log(this.peopleInfo);
}

2.html

<h2>人员登记系统</h2>

<div class="people_list">
<ul>
<li>姓名:<input type="text" name="" id="username" [(ngModel)]="peopleInfo.username"></li> <li>性别:
<input type="radio" name="sex" id="man" value="男" [(ngModel)]="peopleInfo.sex"><label for="man">男</label>
<input type="radio" name="sex" id="woman" value="女" [(ngModel)]="peopleInfo.sex"><label for="woman">女</label>
</li> <li>城市:
<select name="" id="" [(ngModel)]="peopleInfo.city">
<option [value]="item" *ngFor="let item of peopleInfo.cityList">{{item}}</option>
</select>
</li> <li>爱好:
<span *ngFor="let item of peopleInfo.hobby;let key=index">
<input type="checkbox" name="" [id]="key" [(ngModel)]="item.checked"><label [for]="key">{{item.title}}</label>
</span>
</li> <li>备注:
<textarea name="" id="" cols="" rows="" [(ngModel)]="peopleInfo.mark"></textarea>
</li>
</ul> <button ion-button (click)="output()">输出json</button>
</div> <div>
{{peopleInfo | json}}
</div>

3.scss

h2{
text-align: center;
}
.people_list{
width: 400px;
margin: 40px auto;
padding: 20px;
border: 1px solid #eeeeee;
ul{
list-style: none;
}
}

图示:

  

  

Angular7_人员登记系统的更多相关文章

  1. winform基础——实现简易赈灾物资发放登记系统

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  2. 如何用chrome注册版权登记系统

    版权登记系统的网址: http://apply.ccopyright.com.cn/goadatadic/registergetList.do 打开网站,一股古朴的气息扑面而来,嗯,一看就是IE时代的 ...

  3. 25.Flutter中的表单 Radio RadioListTile Switch SwitchListTile 以及表单组件实现一个简单的学员登记系统(下)

    四.Radio.RadioListTile单选按钮组件 Radio常用属性: value单选的值. onChanged改变时触发. activeColor:选中的颜色.背景颜色 groupValue: ...

  4. 公司最近把开发人员的系统全部改为windows了

    公司最近把开发人员的开发环境全部改为windows了,唯一linux系统(一位做python 开发的同事自己安装的),被要求下午下班前改为windows 系统,windows 是公认的不适合开发,我家 ...

  5. Android 6.0 开发人员对系统权限的使用与练习(Permissions Best Practices)

    Permissions Best Practices 在安装的过程中,用户非常easy忽略权限请求. 假设一个用户相应用感觉沮丧或者操心泄漏个人信息,那么这些用户就会不用他或者卸载它. 怎样规避这个问 ...

  6. Angular7 表单

    Angular 表单 input.checkbox.radio. select. textarea 实现在线预约功能 html 文件 <h2>人员登记系统</h2> <d ...

  7. MIS系统开发利器,实施、维护人员自定义报表的福音,AgileEAS.NET SOA平台动态报表指南

    一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...

  8. 【转】使用JIRA搭建企业问题跟踪系统【个人推荐】

    免责声明:     本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除.     原文作者:Judy Shen的专栏     原文地址:使用JIRA搭建企业问题跟踪系统 ...

  9. ERP系统

    ERP系统是企业资源计划(Enterprise Resource Planning )的简称,是指建立在信息技术基础上,集信息技术与先进管理思想于一身,以系统化的管理思想,为企业员工及决策层提供决策手 ...

随机推荐

  1. 模拟vue的tag属性,在react里实现自定义Link

    我封装了一个简单的实现react里自定义Link的方法,方便大家使用. 因为普通组件没有metch.location.history等属性.只有在<Router>里面的<compon ...

  2. try/catch中finally的执行时间

    前言 由于总是搞不清楚try/catch中的一个执行顺序,返回结果.所以总结一下 1.finally没有return 时,可以看出finally确实在return之前执行了 public static ...

  3. 微信小程序开发教程 #043 - 在小程序开发中使用 npm

    本文介绍了如何在微信小程序开发中使用 npm 中包的功能,大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频版更新. 微信小程序在发布之初没有对 npm 的支持功能,这也是目前很多前端开发 ...

  4. 进程与线程的通信机制----Queue

    进程运行时候变量是隔离的,线程间共享全局变量. 进程: from multiprocessing import Process from threading import Thread def get ...

  5. HTML之表格

    表格标签和表格标题 表格标签 <table> <tr> <td></td> ...... </tr> <tr> <td&g ...

  6. 在写php项目时 修改外部css或js文件没有效果

    原因是:浏览器的自动缓存机制导致的. 这是因为浏览器会自动缓存静态文件以加快访问速度,所以这就导致浏览器将不会再接收静态文件了 解决办法是 使用ctrl+F5 —— 传说中的完全刷新,会删掉所有本地临 ...

  7. vue.js实战——vue元素复用

    Vue在渲染元素时,出于效率考虑,会尽可能地复用已有的元素而非重新渲染,例: <!DOCTYPE html> <html lang="en"> <he ...

  8. nginx.conf配置详解

    ######Nginx配置文件nginx.conf中文详解##### #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_ ...

  9. Python——使用Pycharm连接数据库

  10. poj-1807(最大流)

    题意:给你n个插座,m个电器,每个电器有插头,还有k个插头转换器,可以把插座A变成插座B,转换器可以连续使用,比如A转换B,再从B转换C 解题思路:这道题就是题意麻烦,看懂了就很简单,首先建一个汇点和 ...