您的位置：首页 > Web前端 > HTML

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

2017-12-07 20:17 239 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航