Angular实现表单功能

最新推荐文章于 2024-03-11 10:36:31 发布

敲出真谛

最新推荐文章于 2024-03-11 10:36:31 发布

阅读量305

点赞数

分类专栏： angular 文章标签：模拟表单

本文链接：https://blog.csdn.net/qq_36818627/article/details/82429318

版权

angular 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

技术涉及双向数据绑定 ng-repeat、 ng-show指令和数组排序等知识。实现了表单的增、删和排序的功能

代码如下：

<!DOCTYPE html>
<html ng-app="myapp">

	<head>
		<meta charset="UTF-8">
		<title>模拟表单</title>
		<script type="text/javascript" src="../js/angular.js"></script>
		<style>
			.tab-content{
				width: 600px;
				margin: 0 auto;
			}
			table,tr,td,th{
				border: 1px solid #333;
				/*边框重合*/
				border-collapse: collapse;
				text-align: center;
			}
			th,td{
				width: 20%;
				line-height: 150%;
			}
			th{
				cursor: pointer;
			}
			tr:nth-child(2n){
				background-color: #eee;
			}
			.form_box{
				width: 600px;
				margin: 0 auto;
				background-color: skyblue;
			}
		</style>
	</head>

	<body ng-controller="MainCtr as mainctrl">
		<div class="tab-content">
			<table width="600px">
				<tr>
					<th ng-click = "mainctrl.changeSort('code')">编号 <span ng-show = "mainctrl.sortBy == 'code'">{{mainctrl.asc ? '↑':'↓'}}</span></th>
					<th ng-click = "mainctrl.changeSort('title')">名称 <span ng-show = "mainctrl.sortBy == 'title'">{{mainctrl.asc ? '↑':'↓'}}</span></th>
					<th ng-click = "mainctrl.changeSort('unit')">单位 <span ng-show = "mainctrl.sortBy == 'unit'">{{mainctrl.asc ? '↑':'↓'}}</span></th>
					<th ng-click = "mainctrl.changeSort('price')">价格 <span ng-show = "mainctrl.sortBy == 'price'">{{mainctrl.asc ? '↑':'↓'}}</span></th>
					<th ng-click = "mainctrl.changeSort('count')">数量 <span ng-show = "mainctrl.sortBy == 'count'">{{mainctrl.asc ? '↑':'↓'}}</span></th>
					<th>删除</th>
				</tr>
				<tr ng-repeat = "item in mainctrl.data">
					<td>{{item.code}}</td>
					<td>{{item.title}}</td>
					<td>{{item.unit}}</td>
					<td>{{item.price|currency:'￥'}}</td>
					<td>{{item.count}}</td>
					<td><input type="button" value="删除" ng-click ="mainctrl.remove(item.code)"/></td>
				</tr>
			</table>
		</div>
		<div class="form_box">
			<p>结果：{{mainctrl.formobj}}</p>
			<p>编号: <input type="text"  ng-model = "mainctrl.formobj.code"/></p>
			<p>名称: <input type="text"  ng-model = "mainctrl.formobj.title"/></p>
			<p>单位: <input type="text"  ng-model = "mainctrl.formobj.unit"/></p>
			<p>价格: <input type="text"  ng-model = "mainctrl.formobj.price"/></p>
			<p>数量: <input type="text"  ng-model = "mainctrl.formobj.count"/></p>
			<p><input type="button" name="" id="" value="提交"  ng-click = "mainctrl.add()"/></p>
		</div>

	</body>

</html>
<script type="text/javascript">
	var app = angular.module("myapp", []);
	app.controller('MainCtr', function() {
		// 1.定义数据
		this.data = [
		{"code" : "0001" , "title" : "ATF-4R" , "unit" : "升" , "price" : "12.9" , "count" : 10},
		{"code" : "0002" , "title" : "ATF-5R" , "unit" : "升" , "price" : "13.9" , "count" : 6},
		{"code" : "0003" , "title" : "ATF-6R" , "unit" : "升" , "price" : "14.9" , "count" : 9},
		{"code" : "0004" , "title" : "ATF-7R" , "unit" : "升" , "price" : "15.9" , "count" : 8},
		]
		// 2.定义表单对象
		this.formobj = {};
		// 3.定义提交函数
		var that = this;
		this.add = function(){
			that.data.push(that.formobj);
			that.formobj = {};
		}
		// 4.删除函数
		this.remove = function(code){
			console.log(code);
			for(let i = 0 ;i < that.data.length;i++){
				if(that.data[i].code == code){
					// 第二个函数 不为0表示删除
					that.data.splice(i,1);
				}
			}
			
		}
		// 5.定义排序字段
		this.sortBy = "code";
		// 6.定义排序方式 true为升序 false 降序排列
		this.asc = "true";
		// 7.排序方法
		this.changeSort = function(value){
			if(value == that.sortBy){
				that.asc = !that.asc;
			}else{
				that.sortBy = value;
				that.asc = true;
			}
			// 开始排序
			that.data.sort(function(a,b){
				if(a[that.sortBy] > b[that.sortBy]){
					return that.asc ? 1:-1;
				}else{
					return that.asc ? -1:1;
				}
			})
		}
	});
</script>

效果如下：