angularjs资产搜索_angularjs关于资产的项目-优快云博客

本文链接：https://blog.youkuaiyun.com/wanglinuo521/article/details/79056112

本文介绍了一个使用AngularJS实现的简单资产管理应用。该应用包括资产列表显示、资产搜索及资产信息新增等功能。通过实例展示了AngularJS中数据双向绑定、指令与控制器等核心概念的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../libs/angular.min.js"></script>
</head>
<style type="text/css">
* {
margin: 0 auto;
padding: 0;
}

fieldset {
margin-top: 20px;
width: 250px;
}
</style>

<body ng-app="myapp" ng-controller="myctlr">
<table>

<tr>
<td><input type="button" value="资产登陆" ng-click="loge()" /></td>
<td><input type="text" value="资产搜索" ng-keydown="huiche($event)" ng-model="sname" /></td>
</tr>
</table>

<table border="1px" cellspacing="0" cellpadding="0">

<tr>
<td>资产编号</td>
<td>资产名称</td>
<td>资产数量</td>
</tr>
<tr ng-repeat="good in goods">
<td>{{good.bh}}</td>
<td>{{good.gname}}</td>
<td>{{good.gcount}}</td>
</tr>

</table>

<fieldset ng-show="sos">
<center>
<legend>资产录入</legend>
资产编号<input type="text" ng-model="bh_1" /><br /> 资产名称
<input type="text" ng-model="name_1" /><br /> 资产数量
<input type="text" ng-model="count_1" /><br />
<input type="button" value="保存" ng-click="bz()" />
</center>
</fieldset>

<script type="text/javascript">
var mo = angular.module("myapp", []);
mo.controller("myctlr", function($scope) {

var g = [{
"bh": "10011120",
"gname": "iphoneX",
"gcount": "99"
}, {
"bh": "10011121",
"gname": "华为mate10",
"gcount": "20"
}, {
"bh": "10011122",
"gname": "vivoR12",
"gcount": "30"
}];

$scope.goods = g

$scope.loge = function() {

$scope.sos = true;
}

$scope.bz = function() {

var bh1 = $scope.bh_1;
var names = $scope.name_1;
var count1 = $scope.count_1;

var aa = /^\d{8}$/;
var flas = true;
if(!aa.test(bh1)) {
alert("只能是纯数字且8位");
flas = false;

return;
} else {

flas = true
}

var flas1 = true;

if(names == null || names == "") {
alert("资产名称不能为空");
flas1 = false;
return;
} else {
flas1 = true
}

for(var i = 0; i < g.length; i++) {

if(names == g[i].gname) {
alert("资产名称的重复");
flas1 = false;
return;
} else {
flas1 = true
}
}

var bb = /^\d{1,8}$/;
var flas2 = true;
if(!bb.test(count1)) {
alert("只能是纯数字");
flas2 = false;
return;
} else {

flas2 = true
}

if(flas2 == true && flas == true && flas1 == true) {

var g1 = {

"bh": $scope.bh_1,
"gname": $scope.name_1,
"gcount": $scope.count_1
}

$scope.goods.push(g1);
$scope.sos = false;
$scope.bh_1 = "";
$scope.name_1 = "";
$scope.count_1 = "";

}

}

$scope.huiche = function($event) {
var hc = $event.keyCode;
var sname1 = $scope.sname;
if(hc == 13) {

for(var i = 0; i < $scope.goods.length; i++) {

if(sname1 == $scope.goods[i].gname) {
alert("存在");
return;

} else {

alert("不存在");
return;

}
}
}
}

});
</script>

</body>
</html>