Angular展示页面、判断纯数字长度，搜索，添加等

最新推荐文章于 2020-08-30 07:49:35 发布

原创最新推荐文章于 2020-08-30 07:49:35 发布 · 1.6k 阅读

CC 4.0 BY-SA版权

这篇博客展示了如何在Angular应用中实现页面展示、数字长度判断、搜索功能以及添加新记录。通过Angular控制器和数据绑定，实现了资产信息的动态显示、编号必须为8位数字的验证、资产名称的唯一性检查以及数量为纯数字的要求。同时，还包含了一个简单的搜索功能，用于查找资产信息。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<script src="js/jquery-1.11.1.js"></script>
<style>
table{
width: 600px;
text-align: center;
}
td{
border: 1px solid black;
}
form{
width: 800px;
margin-top: 30px;
}
form input{
margin-top: 15px;
}
</style>
<script>
var myapp=angular.module("dxtapp",[]);
myapp.controller("demo1",["$scope",function($scope){

$scope.toadd=false;
$scope.goods=[
{id:10011120,name:"iphoneX",number:99},
{id:10011121,name:"华为mate10",number:20},
{id:10011122,name:"vivoR12",number:55},
];
//添加
$scope.add=function(){
var uid=$scope.uid;
var uname=$scope.uname;
var unumber=$scope.unumber;
var re=/^\d{8,8}$/;
var re1=/^\d{1,}$/;
//验证编号
if(!re.test(uid)){
alert("资产编号必须为数字且长度为8位");
return;
}
//验证名称
if(uname==undefined || uname==""){
alert("资产名称不能为空");
return;
}else{
for(var i=0;i<$scope.goods.length;i++){
var u=$scope.goods[i].name;
if(u==uname){
alert("该资产已存在");
return;
}
}
}
//验证资产数量
if(!re1.test(unumber)){
alert("资产数量必须为纯数字");
return;
}
$scope.toadd=false;
$scope.goods.push({id:uid,name:uname,number:unumber});
};
//搜索
$scope.search=function(){
if($scope.sel==undefined || $scope.sel==""){
alert("输入内容不能为空");
return;
}
for(var i=0; i<$scope.goods.length;i++){
if($scope.goods[i].name==$scope.sel){
alert("搜到相关内容");
return true;
}
}
alert("未搜索到相关内容");
};
}])
</script>
</head>
<body ng-app="dxtapp" ng-controller="demo1">
<center>
<p>资产登记</p>
<button ng-click="toadd=true" style="margin-right: 600px;">添加</button><br />
<span style="margin-left: 300px;">资产搜索</span><input ng-model="sel"/>
<button ng-click="search()">搜索</button>
<table border="1" cellspacing="0">
<tr>
<td>资产编号</td>
<td>资产名称</td>
<td>资产数量</td>
</tr>
<tr ng-repeat="g in goods">
<td>{{g.id}}</td>
<td>{{g.name}}</td>
<td>{{g.number}}</td>
</tr>
</table><br />
<form ng-show="toadd">
资产编号<input type="text" ng-model="uid" /><br />
资产名称<input type="text" ng-model="uname" /><br />
资产数量<input type="text" ng-model="unumber" /><br />
<button ng-click="add()" style="margin-top: 15px;">资产录入</button>
</form>
</center>
</body>
</html>