添加修改 + 表单验证
2018-01-17 14:49
190 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../Day08/js/jquery-3.2.1.min.js"></script>
<script src="../Day08/js/angular.min.js"></script>
<script src="../Day08/js/angular-route.js"></script>
<script type="text/javascript"></script>
<script>
var app = angular.module("Lj",[]);
app.controller("count",function($scope){
$scope.people = [{name:'张三',pass:123123,age:18,sex:'男'},
{name:'李四',pass:123123,age:14,sex:'女'},
{name:'王五',pass:123123,age:16,sex:'男'},
{name:'赵六',pass:123123,age:19,sex:'女'}];
$scope.deleAll = function(){
var items = 0;
for(var i=0; i<$scope.people.length; i++){
if(confirm("是否全部删除")){
$scope.people.splice(i);
}
}
}
$scope.ckAll = function(){
for(var i=0; i<$scope.people.length; i++){
$scope.people[i].ck = $scope.cks;
}
}
$scope.dele = function(){
var datas = 0;
for(var i=0; i<$scope.people.length; i++){
if($scope.people[i].ck){
datas ++;
$scope.people.splice(i,1);
i--;
}
}
if(datas == 0){
alert("请选择");
}
}
$scope.cha = function(a){
var selage_b = $scope.selage;
if(selage_b == undefined || selage_b == ""){
return true;
}
var as = selage_b.split("-");
var min = as[0];
var max = as[1];
if(a>=min && a<=max){
return true;
}else{
return false;
}
}
$scope.divShow = false;
$scope.adds = function(){
$scope.checkSub = [];
var X_name = $scope.newname;
var X_pass = $scope.newpass ;
var X_age = $scope.newage ;
var X_sex = $scope.newsex;
var newstu = {name:X_name,pass:X_pass,age:X_age,sex:X_sex};
if(X_name == "" || X_name == null){
$scope.checkSub.push("姓名不能为空");
}
if(X_pass== "" || X_pass == null){
$scope.checkSub.push("密码不能为空");
}else if(isNaN(X_pass)){
$scope.checkSub.push("密码不能有小数点")
}
if(X_age == "" || X_age == null){
$scope.checkSub.push("年龄不能为空");
}else if(isNaN(X_age)){
$scope.checkSub.push("年龄不能有小数点")
}
if(X_sex == "" || X_sex == null){
$scope.checkSub.push("性别不能为空");
}
if($scope.checkSub.length>0){
$scope.divShow = true;
$scope.formShow = true;
}else{
$scope.formShow = false;
$scope.divShow = false;
$scope.people.push(newstu);
}
}
});
</script>
<style>
#box{
padding-top: 50px;
width: 800px;
height: 600px;
background: plum;
margin: 0 auto;
text-align: center;
}
table{
width: 700px;
margin: 0 auto;
}
</style>
</head>
<body ng-app="Lj" ng-controller="count">
<div id="box">
姓名查找:<input type="text" ng-model="selname" placeholder="根据姓名输入"/>
年龄查找:<select ng-model="selage">
<option ng-selected="true">请选择</option>
<option>10-20</option>
<option>20-30</option>
<option>30-40</option>
</select>
性别查找:<select ng-model="selsex">
<option ng-selected="true">请选择</option>
<option>男</option>
<option>女</option>
</select>
<input type="button" value="删除全部" ng-click="deleAll()"/>
<input type="button" value="批量删除" ng-click="dele()"/>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>全选<input type="checkbox" ng-click="ckAll()" ng-model="cks"/></td>
<td>序号</td>
<td>姓名</td>
<td>密码</td>
<td>年龄</td>
<td>性别</td>
<td>操作</td>
</tr>
<tr ng-repeat="p in people|filter:{name:selname}|filter:{sex:selsex}" ng-show="cha(p.age)">
<td><input type="checkbox" ng-model="p.ck"/></td>
<td>{{$index}}</td>
<td>{{p.name}}</td>
<td>
{{p.pass}}
<span ng-show="f">
<input ng-model="p.pass"/>
<button ng-click="f=false" style="background: yellow;">保存</button>
</span>
</td>
<td>{{p.age}}</td>
<td>{{p.sex}}</td>
<td><input type="button" value="修改密码" ng-click="f=true"/></td>
</tr>
</table><br /><br />
<input type="button" value="添加用户" ng-click="formShow=true"/><br /><br />
<form style="border:2px solid red; width: 500px; margin: 0 auto;" ng-show="formShow">
姓名:<input type="text" placeholder="请输入姓名" ng-model="newname"/><br />
密码:<input type="text" placeholder="请输入密码" ng-model="newpass"/><br />
年龄:<input type="text" placeholder="请输入年龄" ng-model="newage"/><br />
性别:<input type="text" placeholder="请输入性别" ng-model="newsex"/><br />
<div style="border: 1px solid red; width: 250px; margin: 0 auto;" ng-show="divShow">
<ul>
<li ng-repeat="chenk in checkSub">{{chenk}}</li>
</ul>
</div><br />
<input type="button" value="提交" style="align-content: center;" ng-click="adds()"/>
</form>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../Day08/js/jquery-3.2.1.min.js"></script>
<script src="../Day08/js/angular.min.js"></script>
<script src="../Day08/js/angular-route.js"></script>
<script type="text/javascript"></script>
<script>
var app = angular.module("Lj",[]);
app.controller("count",function($scope){
$scope.people = [{name:'张三',pass:123123,age:18,sex:'男'},
{name:'李四',pass:123123,age:14,sex:'女'},
{name:'王五',pass:123123,age:16,sex:'男'},
{name:'赵六',pass:123123,age:19,sex:'女'}];
$scope.deleAll = function(){
var items = 0;
for(var i=0; i<$scope.people.length; i++){
if(confirm("是否全部删除")){
$scope.people.splice(i);
}
}
}
$scope.ckAll = function(){
for(var i=0; i<$scope.people.length; i++){
$scope.people[i].ck = $scope.cks;
}
}
$scope.dele = function(){
var datas = 0;
for(var i=0; i<$scope.people.length; i++){
if($scope.people[i].ck){
datas ++;
$scope.people.splice(i,1);
i--;
}
}
if(datas == 0){
alert("请选择");
}
}
$scope.cha = function(a){
var selage_b = $scope.selage;
if(selage_b == undefined || selage_b == ""){
return true;
}
var as = selage_b.split("-");
var min = as[0];
var max = as[1];
if(a>=min && a<=max){
return true;
}else{
return false;
}
}
$scope.divShow = false;
$scope.adds = function(){
$scope.checkSub = [];
var X_name = $scope.newname;
var X_pass = $scope.newpass ;
var X_age = $scope.newage ;
var X_sex = $scope.newsex;
var newstu = {name:X_name,pass:X_pass,age:X_age,sex:X_sex};
if(X_name == "" || X_name == null){
$scope.checkSub.push("姓名不能为空");
}
if(X_pass== "" || X_pass == null){
$scope.checkSub.push("密码不能为空");
}else if(isNaN(X_pass)){
$scope.checkSub.push("密码不能有小数点")
}
if(X_age == "" || X_age == null){
$scope.checkSub.push("年龄不能为空");
}else if(isNaN(X_age)){
$scope.checkSub.push("年龄不能有小数点")
}
if(X_sex == "" || X_sex == null){
$scope.checkSub.push("性别不能为空");
}
if($scope.checkSub.length>0){
$scope.divShow = true;
$scope.formShow = true;
}else{
$scope.formShow = false;
$scope.divShow = false;
$scope.people.push(newstu);
}
}
});
</script>
<style>
#box{
padding-top: 50px;
width: 800px;
height: 600px;
background: plum;
margin: 0 auto;
text-align: center;
}
table{
width: 700px;
margin: 0 auto;
}
</style>
</head>
<body ng-app="Lj" ng-controller="count">
<div id="box">
姓名查找:<input type="text" ng-model="selname" placeholder="根据姓名输入"/>
年龄查找:<select ng-model="selage">
<option ng-selected="true">请选择</option>
<option>10-20</option>
<option>20-30</option>
<option>30-40</option>
</select>
性别查找:<select ng-model="selsex">
<option ng-selected="true">请选择</option>
<option>男</option>
<option>女</option>
</select>
<input type="button" value="删除全部" ng-click="deleAll()"/>
<input type="button" value="批量删除" ng-click="dele()"/>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>全选<input type="checkbox" ng-click="ckAll()" ng-model="cks"/></td>
<td>序号</td>
<td>姓名</td>
<td>密码</td>
<td>年龄</td>
<td>性别</td>
<td>操作</td>
</tr>
<tr ng-repeat="p in people|filter:{name:selname}|filter:{sex:selsex}" ng-show="cha(p.age)">
<td><input type="checkbox" ng-model="p.ck"/></td>
<td>{{$index}}</td>
<td>{{p.name}}</td>
<td>
{{p.pass}}
<span ng-show="f">
<input ng-model="p.pass"/>
<button ng-click="f=false" style="background: yellow;">保存</button>
</span>
</td>
<td>{{p.age}}</td>
<td>{{p.sex}}</td>
<td><input type="button" value="修改密码" ng-click="f=true"/></td>
</tr>
</table><br /><br />
<input type="button" value="添加用户" ng-click="formShow=true"/><br /><br />
<form style="border:2px solid red; width: 500px; margin: 0 auto;" ng-show="formShow">
姓名:<input type="text" placeholder="请输入姓名" ng-model="newname"/><br />
密码:<input type="text" placeholder="请输入密码" ng-model="newpass"/><br />
年龄:<input type="text" placeholder="请输入年龄" ng-model="newage"/><br />
性别:<input type="text" placeholder="请输入性别" ng-model="newsex"/><br />
<div style="border: 1px solid red; width: 250px; margin: 0 auto;" ng-show="divShow">
<ul>
<li ng-repeat="chenk in checkSub">{{chenk}}</li>
</ul>
</div><br />
<input type="button" value="提交" style="align-content: center;" ng-click="adds()"/>
</form>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AngularJS综合用户信息, 表单验证,过滤查询,全选反选,批量删除,修改,添加
- jQuery表单验证和添加表格 删除修改
- 【DWZ】表单验证规则介绍，与如何修改表单验证，如何添加自定义表单验证
- 关于表格动态添加行并处理相关表单元素的一些修改----优化for重用(1)
- 购物车 添加修改验证
- php 在同一个表单中添加和修改数据 二
- MVVM架构~knockoutjs系列之表单添加（验证）与列表操作源码开放
- bootstrap表单验证插件 经验记录 与RSA加密事件配合修改
- 表单验证table表格添加数据
- Yii中为表单添加必填字段域验证
- 网上找的一个表单验证类及使用例子(稍微修改了下)
- js通用验证,给表单添加属性！
- 基类、接口的应用——表单控件：一次添加、修改一条记录，一次修改多条记录。（上）
- struct2(六) 为表单添加验证
- validate 表单验证 添加图片(image)
- 网上找的一个表单验证类及使用例子(稍微修改了下)
- Volley框架源码修改，添加头部验证Hreaders问题
- javascript中添加表单验证（密码与确认密码，身份证号码格式验证）
- jquery表单验证添加到表格再删除easyNew
- angular搜索 过滤 批量删除 添加 表单验证等小集成