Angular7_人员登记系统
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_人员登记系统的更多相关文章
- winform基础——实现简易赈灾物资发放登记系统
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...
- 如何用chrome注册版权登记系统
版权登记系统的网址: http://apply.ccopyright.com.cn/goadatadic/registergetList.do 打开网站,一股古朴的气息扑面而来,嗯,一看就是IE时代的 ...
- 25.Flutter中的表单 Radio RadioListTile Switch SwitchListTile 以及表单组件实现一个简单的学员登记系统(下)
四.Radio.RadioListTile单选按钮组件 Radio常用属性: value单选的值. onChanged改变时触发. activeColor:选中的颜色.背景颜色 groupValue: ...
- 公司最近把开发人员的系统全部改为windows了
公司最近把开发人员的开发环境全部改为windows了,唯一linux系统(一位做python 开发的同事自己安装的),被要求下午下班前改为windows 系统,windows 是公认的不适合开发,我家 ...
- Android 6.0 开发人员对系统权限的使用与练习(Permissions Best Practices)
Permissions Best Practices 在安装的过程中,用户非常easy忽略权限请求. 假设一个用户相应用感觉沮丧或者操心泄漏个人信息,那么这些用户就会不用他或者卸载它. 怎样规避这个问 ...
- Angular7 表单
Angular 表单 input.checkbox.radio. select. textarea 实现在线预约功能 html 文件 <h2>人员登记系统</h2> <d ...
- MIS系统开发利器,实施、维护人员自定义报表的福音,AgileEAS.NET SOA平台动态报表指南
一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...
- 【转】使用JIRA搭建企业问题跟踪系统【个人推荐】
免责声明: 本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除. 原文作者:Judy Shen的专栏 原文地址:使用JIRA搭建企业问题跟踪系统 ...
- ERP系统
ERP系统是企业资源计划(Enterprise Resource Planning )的简称,是指建立在信息技术基础上,集信息技术与先进管理思想于一身,以系统化的管理思想,为企业员工及决策层提供决策手 ...
随机推荐
- 模拟vue的tag属性,在react里实现自定义Link
我封装了一个简单的实现react里自定义Link的方法,方便大家使用. 因为普通组件没有metch.location.history等属性.只有在<Router>里面的<compon ...
- try/catch中finally的执行时间
前言 由于总是搞不清楚try/catch中的一个执行顺序,返回结果.所以总结一下 1.finally没有return 时,可以看出finally确实在return之前执行了 public static ...
- 微信小程序开发教程 #043 - 在小程序开发中使用 npm
本文介绍了如何在微信小程序开发中使用 npm 中包的功能,大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频版更新. 微信小程序在发布之初没有对 npm 的支持功能,这也是目前很多前端开发 ...
- 进程与线程的通信机制----Queue
进程运行时候变量是隔离的,线程间共享全局变量. 进程: from multiprocessing import Process from threading import Thread def get ...
- HTML之表格
表格标签和表格标题 表格标签 <table> <tr> <td></td> ...... </tr> <tr> <td&g ...
- 在写php项目时 修改外部css或js文件没有效果
原因是:浏览器的自动缓存机制导致的. 这是因为浏览器会自动缓存静态文件以加快访问速度,所以这就导致浏览器将不会再接收静态文件了 解决办法是 使用ctrl+F5 —— 传说中的完全刷新,会删掉所有本地临 ...
- vue.js实战——vue元素复用
Vue在渲染元素时,出于效率考虑,会尽可能地复用已有的元素而非重新渲染,例: <!DOCTYPE html> <html lang="en"> <he ...
- nginx.conf配置详解
######Nginx配置文件nginx.conf中文详解##### #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_ ...
- Python——使用Pycharm连接数据库
- poj-1807(最大流)
题意:给你n个插座,m个电器,每个电器有插头,还有k个插头转换器,可以把插座A变成插座B,转换器可以连续使用,比如A转换B,再从B转换C 解题思路:这道题就是题意麻烦,看懂了就很简单,首先建一个汇点和 ...