练习代码

来源：互联网发布：scrollreveal.js 编辑：程序博客网时间：2024/06/03 17:17

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div{
margin-top: 50px;
}
.span{
margin-left: 140px;
}
</style>
<script type="text/javascript" src="js/angular.min.js" ></script>
</head>
<body ng-app="myapp" ng-controller="mycr">
<center>
<p">资产登记
<span class="span">资产搜索</span>   <input type="text" ng-model="sou" />
<input type="button" value="搜索" ng-click="sousuo()"/>
</p>
<table border="1px" cellpadding="1" cellspacing="0" width="500px">
<tr>
<th>资产编号</th>
<th>资产名称</th>
<th>资产数量</th>
</tr>
<tr ng-repeat="x in good" align="center">
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>{{x.count}}</td>
</tr>
</table>
<div class="div">
资产编号<input type="text" ng-model="mid" /><br /><br />
资产名称<input type="text" ng-model="mname" /><br /><br />
资产数量<input type="text" ng-model="mcount" /><br /><br />
<input type="button" value="资产录入" ng-click="add()"/>
</div>
</center>
</body>
<script>
var app=angular.module("myapp",[]);
app.controller("mycr",function($scope){
$scope.good=[
{"id":"10011120",
"name":"iphoneX",
"count":"99"},
{"id":"10011121",
"name":"华为mate10",
"count":"20"},
{"id":"10011122",
"name":"vivoR12",
"count":"55"}
];

$scope.add=function(){

//资产编号格式的验证
var flog=true;
var nid=/^\d{8}$/;
if(!nid.test($scope.mid)){
alert("必须为数字，且长度为8位");
flog=false;
return ;
}

//实现资产录入时对资产名称的重复判断
for (var i=0;i<$scope.good.length;i++) {
if($scope.good[i].name.indexOf($scope.mname)>=0){
alert("该资产已存在")
flog=false;
return ;
}

}

//资产数量的判断
var ncount=/^\d+$/;
if(!ncount.test($scope.mcount)){
alert("必须为纯数字");
flog=false;
return ;
}

//验证通过添加
if (flog) {
var goods={
"id":$scope.mid,
"name":$scope.mname,
"count":$scope.mcount}
$scope.good.push(goods);

//清空的代码
$scope.mid="";
$scope.mname="";
$scope.mcount="";

}
}

$scope.sousuo=function(){
//实现资产搜索内容框如果为空时，点击搜索提示输入框不能为空的提示

if ($scope.sou==undefined||$scope.sou=="") {
alert("输入框不能为空")
return ;
}

var flog=false;

for (var i=0;i<$scope.good.length;i++) {
if($scope.good[i].name==$scope.sou){

flog=true;

}
}

if(flog){
alert("搜到相关内容 ")
}else{
alert("未搜到相关内容")
}

}

})

</script>
</html>

阅读全文

0 0