Angularjs添加用户

最新推荐文章于 2018-08-28 14:40:38 发布

GLqueen110

最新推荐文章于 2018-08-28 14:40:38 发布

阅读量283

点赞数

本文链接：https://blog.csdn.net/guoleisb10/article/details/78337380

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>添加元素</title>
		<script type="text/javascript" src="js/angular.js" ></script>
		<script type="text/javascript" src="js/angular-route.js" ></script>
		<style>
			button{
				border: 5px solid blue;
				background-color: blue;
				border-radius: 5%;
			}
		</style>
		<script>
			var app = angular.module("myApp",[]);
			app.controller("myCtrl",function($scope){
				$scope.users = [
				{name:"张三",sex:"男",age:"15",work:"teacher"},
				{name:"张四",sex:"女",age:"16",work:"worker"},
				{name:"王五",sex:"男",age:"17",work:"chair"}];
				
				 $scope.name = "";
				 $scope.sex = "";
				 $scope.age = "";
				 $scope.work = "";
				   
					
				$scope.addel = function(){
					
					var newUsers = {
						name:$scope.name,
						sex:$scope.sex,
						age:$scope.age,
						work:$scope.work};
					$scope.users.push(newUsers)
					
				}
				
				
			});
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myCtrl">
		<center>
		<caption><h3>学生信息表</h3></caption><br />
		<table border="2" cellpadding="10" cellspacing="0" width="500px" style="text-align: center;">
			<thead>
				<tr>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
					<th>职业</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="user in users">
					<td>{{user.name}}</td>
					<td>{{user.sex}}</td>
					<td>{{user.age}}</td>
					<td>{{user.work}}</td>
				</tr>
			</tbody>
		</table><br />
		
		<div>
			姓名：<input type="text" ng-model="name"><br/><br />
			性别：<input type="text" ng-model="sex"><br/><br />
			年龄：<input type="text" ng-model="age"><br/><br />
			职业：<input type="text" ng-model="work">
		</div>
		<button ng-click="addel()">增加用户</button>
		</center>
	</body>
</html>