<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = angular.module("myapp",[]);
app.controller("myctrl",function ($scope) {
//1.初始化表单---隐藏
$scope.toadd=false;
//初始化按钮的状态
$scope.flag = false;
//初始化数据
$scope.persons=[{name:"张三",age:18},{name:"张二",age:29},{name:"张大",age:31}];
//2.添加的事件
$scope.save=function () {
//2.0初始化验证的信息
$(".v_span").html("");
//2.1获取到输入的值
var names = $scope.name;
var ages = $scope.age;
//alert(names+"---"+ages);
//2.2验证信息---姓名
if (names==null||names=="") {
$("#name_span").html("姓名不能为空");
$("#name_span").css("color","red");
return;
}
if (ages==null||ages=="") {
$("#age_span").html("年龄不能为空");
$("#age_span").css("color","red");
return;
}
//2.3进行数据的添加
$scope.persons.push({name:names,age:ages});
//2.4隐藏表单
$scope.toadd = false;
//清空信息
$(".one").val("");
}
//3.点击删除
$scope.del=function (index) {
$scope.persons.splice(index,1);
}
});
</script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<button ng-click="toadd=true" onclick="add()">添加</button>
<table border="1px" cellspacing="0" cellpadding="0" width="400px">
<tr ng-repeat="s in persons">
<td><span ng-show="!flag">{{s.name}}</span>
<input type="text" value="s.name" ng-model="s.name" ng-show="flag"/>
</td>
<td>{{s.age}}</td>
<td><input type="button" value="删除" ng-click="del($index)"/>
|
<input type="button" value="修改" ng-click="flag=true" ng-show="!flag"/>
<input type="button" value="保存" ng-click="flag=false" ng-show="flag"/>
</td>
</tr>
</table>
<hr />
<form ng-show="toadd">
姓名:<input type="text" ng-model="name" class="one" /><span id="name_span" class="v_span"></span><br />
年龄:<input type="text" ng-model="age" class="one" /><span id="age_span" class="v_span"></span><br />
<button ng-click="save()">保存信息</button>
</form>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = angular.module("myapp",[]);
app.controller("myctrl",function ($scope) {
//1.初始化表单---隐藏
$scope.toadd=false;
//初始化按钮的状态
$scope.flag = false;
//初始化数据
$scope.persons=[{name:"张三",age:18},{name:"张二",age:29},{name:"张大",age:31}];
//2.添加的事件
$scope.save=function () {
//2.0初始化验证的信息
$(".v_span").html("");
//2.1获取到输入的值
var names = $scope.name;
var ages = $scope.age;
//alert(names+"---"+ages);
//2.2验证信息---姓名
if (names==null||names=="") {
$("#name_span").html("姓名不能为空");
$("#name_span").css("color","red");
return;
}
if (ages==null||ages=="") {
$("#age_span").html("年龄不能为空");
$("#age_span").css("color","red");
return;
}
//2.3进行数据的添加
$scope.persons.push({name:names,age:ages});
//2.4隐藏表单
$scope.toadd = false;
//清空信息
$(".one").val("");
}
//3.点击删除
$scope.del=function (index) {
$scope.persons.splice(index,1);
}
});
</script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<button ng-click="toadd=true" onclick="add()">添加</button>
<table border="1px" cellspacing="0" cellpadding="0" width="400px">
<tr ng-repeat="s in persons">
<td><span ng-show="!flag">{{s.name}}</span>
<input type="text" value="s.name" ng-model="s.name" ng-show="flag"/>
</td>
<td>{{s.age}}</td>
<td><input type="button" value="删除" ng-click="del($index)"/>
|
<input type="button" value="修改" ng-click="flag=true" ng-show="!flag"/>
<input type="button" value="保存" ng-click="flag=false" ng-show="flag"/>
</td>
</tr>
</table>
<hr />
<form ng-show="toadd">
姓名:<input type="text" ng-model="name" class="one" /><span id="name_span" class="v_span"></span><br />
年龄:<input type="text" ng-model="age" class="one" /><span id="age_span" class="v_span"></span><br />
<button ng-click="save()">保存信息</button>
</form>
</body>
</html>