HTML数组显示+删除+修改+增加

创建时间：2017-12-07 投稿人：浏览次数：247

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/anglarjs.min.js"></script>
		<script src="js/jquery-1.11.1.js"></script>
		<script>
			var z_app = angular.module("APP", []);
			z_app.controller("dex", ["$scope", function($scope) {

				$scope.users = [{
					name: "adw",
					age: 15
				}, {
					name: "adw",
					age: 15
				}, {
					name: "adw",
					age: 15
				}, {
					name: "adw",
					age: 15
				}, {
					name: "adw",
					age: 15
				}];

				$scope.remove = function(a) {
					$scope.users.splice(a, 1);
				}
				$scope.add = function() {
					var aname = $scope.uname;
					var age = $scope.uage;
					if(aname == ""||aname==undefined) {
						$("#uu_name").text("不能为空");
						$("#uu_name").css("color", "red");
						return;
					} else {
						$("#uu_name").text("");

					}
					$scope.users.push({
						name: aname,
						age: age
					});
					$scope.toadd = false;
				}

			}])
		</script>
		<style>
			div {
				width: 300px;
				background-color: darkgrey;
			}
		</style>
	</head>

	<body ng-app="APP" ng-controller="dex">
		<table width="400px" border="1px">
			<tr ng-repeat="u in users" ng-init="xianshi=true">
				<td width="100px"> <span  ng-show="xianshi"  >{{u.name}}</span>
					<input  type="text" ng-model="u.name" ng-show="!xianshi" />
					
				</td>
				<td width="100px">{{u.age}}</td>
				<td width="100px"> <input type="button" value="删除 " ng-click="remove($index)" /> ||
					<input type="button" value="修改" ng-click="xianshi=false" ng-show="xianshi"/>
					<input type="button" value="保存" ng-click="xianshi=true" ng-show="!xianshi"  />

				</td>
			</tr>
		</table>
		<input type="button" value="添加" ng-click="toadd=true" />

		<form ng-show="toadd">
			姓名：<input type="text" ng-model="uname" />
			<span id="uu_name"></span>
			<br /> 年龄：
			<input type="text" ng-model="uage" /><br />
			<input type="button" value="queding" ng-click="add()" />
		</form>

	</body>

</html>

声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。

热门文章: CTF writeup 2_南邮网络攻防训...; SSM框架——详细整合教程（...; Linux Shell脚本编程－－curl命...; HttpClient使用详解; Java面试题全集（上）; JAVA设计模式之单例模式; java.lang.OutOfMemoryError: PermGen ...; TCP协议中的三次握手和四次...; form表单的两种提交方式，su...; String,StringBuffer与StringBuilder...

最新文章: Java之品优购课程讲义_day20（7）; 剑指 Offer - 8：跳台阶; Netty权威指南_札记02_NIO编程; mysql时间属性之时间戳和datetime之...; 虚拟现实或许可以拯救古埃及的“...; spring cloud服务注册中心eureka---集群...; Java SE 第六章; HTTP请求+数据库; HIDL学习笔记之HIDL C++（第二天）; ubuntu系统下指定tomcat运行时为JDK1.8...