资产登记案例（angular）

最新推荐文章于 2025-08-03 14:49:33 发布

原创最新推荐文章于 2025-08-03 14:49:33 发布 · 300 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular

本文介绍了一个简单的资产管理系统，使用Angular实现资产的录入与查询功能。系统确保资产编号长度不少于8位数字，并且检查资产名称是否重复。此外，还实现了基于资产名称的搜索功能。

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

这里写图片描述

主要功能：
1.添加数据，判断是否符合条件（资产编号长度不能小于8，新增用户名是否重复等）
2.查询
注：资产编号和数量只能输入纯数字不然输不上去

<!DOCTYPE html>
<html>

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

    <body ng-app="app" ng-controller="ct">
        <center>
            <p>资产登记</p>
            <table cellpadding="0px" cellspacing="0px" border="1px">
                <tr>
                    <th>资产编号</th>
                    <th>资产名称</th>
                    <th>资产数量</th>
                </tr>
                <tr ng-repeat="g in gs">
                    <td>{{g.num}}</td>
                    <td>{{g.name}}</td>
                    <td>{{g.sum}}</td>
                </tr>
            </table>
            <fieldset style="width: 250px;">
                资产编号<input type="text" ng-model="n" onkeyup="value=value.replace(/[^\d]/g,'') " /><br /> 资产名称
                <input type="text" ng-model="a" /><br /> 资产数量
                <input type="text" ng-model="s" onkeyup="value=value.replace(/[^\d]/g,'') " /><br />
                <input type="button" value="资产录入" ng-click="cun()" />
            </fieldset>
            资产搜索<input type="text" ng-model="aa" /><br />
            <input type="button" value="搜索" ng-click="cha()" />
        </center>
        <script type="text/javascript">
            var mo = angular.module("app", []);
            mo.controller("ct", function($scope) {
                var arr = [{
                    "num": "10011120",
                    "name": "iphoneX",
                    "sum": "99"
                }, {
                    "num": "10011121",
                    "name": "华为mate10",
                    "sum": "20"
                }, {
                    "num": "10011122",
                    "name": "vivoR12",
                    "sum": "55"
                }];
                $scope.gs = arr;
                $scope.cun = function() {

                    if ($scope.n == "" || $scope.n == null) {
                        alert("资产编号不能为空");
                        return;
                    } else if ($scope.n.length < 8) {
                        alert("资产编号长度不能小于8");
                        return;
                    }
                    if ($scope.a == "" || $scope.a == null) {
                        alert("资产名称不能为空");
                        return;
                    }
                    //判断新增用户名是否重复
                    for (var i = 0; i < $scope.gs.length; i++) {
                        if ($scope.a ==  $scope.gs[i].name) {
                            alert("用户名重复的");
                            return;
                        }

                    }

                    if ($scope.s == "" || $scope.s == null) {
                        alert("资产数量不能为空");
                        return;
                    }
                    var oo = {
                        "num": $scope.n,
                        "name": $scope.a,
                        "sum": $scope.s
                    };

                    $scope.gs.push(oo);

                    $scope.n = "";
                    $scope.a = "";
                    $scope.s = "";
                }
                $scope.cha = function() {
                    var newp = [];
                    var v = $scope.aa;
                    if (v == "" || v == null) {
                        alert("输入框不能为空");
                        return;
                    }
                    for (var i = 0; i < arr.length; i++) {
                        var r = arr[i].name;
                        if (r.indexOf(v) != -1) {
                            newp.push(arr[i]);
                            alert("搜到相关内容");
                        }

                    }
                    if (newp.length == 0) {
                        alert("未搜到相关内容");
                        return;
                    }
                    $scope.gs = newp
                }
            });
        </script>
    </body>

</html>