angulajs增删改查以及排序验证

来源：互联网发布："笨办法"学python 编辑：程序博客网时间：2024/06/03 17:38

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js"></script>

<style>
.title {
margin-top: 20px;
}

.table {
margin-top: 30px;
}

.f {
margin-top: 30px;
width: 600px;
}
</style>
</head>

<body ng-app="myapp" ng-controller="mycr">
<center>
<p>管理信息</p>
<div class="title">
<input type="button" value="批量删除" ng-click="pshan()" />     用户名  
<input type="text" ng-model="mname" ng-keydown="huiche($event)" />    

<select ng-model="px" ng-init="px=xuan[0]" ng-change="paixu()">
<option ng-repeat="xx in xuan">{{xx}}</option>
</select>
    

<input type="button" value="添加" ng-click="tian()" />
</div>

<table border="1px" width="600px" cellpadding="0" cellspacing="1" class="table">
<tr>
<th><input type="checkbox" ng-model="qx" ng-click="mqx()" /></th>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
<th>录入日期</th>
<th>操作</th>
</tr>

<tr align="center" ng-repeat="x in user|filter:{name:sname}">
<td><input type="checkbox" ng-model="x.check" /></td>
<td>{{x.name}}</td>
<td>{{x.age}}</td>
<td>{{x.city}}</td>
<td>{{x.data}}</td>
<td>
<input type="button" value="修改" ng-click="update($index)"/>  
<input type="button" value="删除" ng-click="shanchu($index)" />
</td>
</tr>
</table>

<fieldset class="f" ng-show="yinxian">
<legend>用户信息</legend>
<center>
姓名<input type="txet" ng-model="aname" /><br /><br /> 年龄
<input type="txet" ng-model="aage" /><br /><br /> 城市
<input type="txet" ng-model="acity" /><br /><br />
<input type="button" value="OK" ng-click="add()" />
</center>
</fieldset>

</center>
</body>
<script>
var app = angular.module("myapp", []);
app.controller("mycr", function($scope) {
$scope.xuan = ["以年龄倒序", "以年龄正序"];

$scope.user = [{
"check": false,
"name": "张三",
"age": "22",
"city": "北京",
"data": "2014-12-15"
},
{
"check": false,
"name": "文儿",
"age": "24",
"city": "河北",
"data": "2015-10-12"
},
{
"check": false,
"name": "夏可可",
"age": "20",
"city": "石家庄",
"data": "2017-08-22"
}
];

//根据用户名模糊查询
$scope.huiche = function(enevt) {
if(enevt.keyCode == 13) {
$scope.sname = $scope.mname;
}
}

//排序的代码
$scope.paixu = function() {
//alert($scope.px)
if($scope.px == "以年龄倒序") {
$scope.sname="";
$scope.user.sort(function(a,b){
return b.age-a.age;
})

} else {
$scope.user.sort(function(a,b){
$scope.sname="";
return a.age-b.age;
})

}

}

//删除的代码
$scope.shanchu = function($index) {
$scope.user.splice($index, 1);

}

//全选的代码
$scope.mqx = function() {

if($scope.qx) {

for(var i = 0; i < $scope.user.length; i++) {
$scope.user[i].check = true;
}
} else {
for(var i = 0; i < $scope.user.length; i++) {
$scope.user[i].check = false;
}
}
}

//批量删除的代码
$scope.pshan = function() {
for(var i = $scope.user.length - 1; i >= 0; i--) {
if($scope.user[i].check) {
$scope.user.splice(i, 1);
}
}
//把全选改为false
$scope.qx = false;
}

//点击添加按钮显示添加
$scope.tian = function() {
$scope.yinxian = true;

//添加的代码
$scope.add = function() {

var flog = kong($scope.aname) && kong($scope.aage) && shu($scope.aage) && kong($scope.acity);

if(flog) {
var tian = {
"check": false,
"name":$scope.aname,
"age": $scope.aage,
"city": $scope.acity,
"data": new Date().toLocaleDateString(),
};
$scope.user.push(tian);

//清空的方法
$scope.aname="";
$scope.aage="";
$scope.acity="";
//隐藏
$scope.yinxian = false;
}
}

}

//不为空的方法
function kong(k) {
if(k == undefined||k=="") {

alert("不能为空")
return false;
}
return true;
}
//年龄必须为数字的方法
function shu(s) {
var s1 = /^\d+$/;
if(!s1.test(s)) {
alert("年龄必须为数字")
return false;
}
return true;
}

//修改的代码
$scope.update=function($index){
$scope.yinxian = true;
$scope.aname=$scope.user[$index].name;
$scope.aage=$scope.user[$index].age;
$scope.acity=$scope.user[$index].city;

$scope.add = function() {

//判断不为空年龄必须为数字
var flog = kong($scope.aname) && kong($scope.aage) && shu($scope.aage) && kong($scope.acity);
if(flog){
//两种方法都行
/*splice第一个参数为要删除的下标第二个为删除1个第三个为把当前值替换为ss对象*/
/*var ss={"name":$scope.aname,"age":$scope.aage,"city":$scope.acity,"data":new Date().toLocaleDateString()};
$scope.user.splice($index, 1,ss);*/
$scope.user[$index].name=$scope.aname;
$scope.user[$index].age=$scope.aage;
$scope.user[$index].city=$scope.acity;

}
//清空的方法
$scope.aname="";
$scope.aage="";
$scope.acity="";
//隐藏
$scope.yinxian = false;

}
}

})
</script>

</html>

阅读全文

0 0