仿记事本

最新推荐文章于 2022-10-01 10:58:08 发布

JSHeng@

最新推荐文章于 2022-10-01 10:58:08 发布

阅读量256

点赞数

CC 4.0 BY-SA版权

分类专栏： angularjs

本文链接：https://blog.youkuaiyun.com/jiaosheng1/article/details/78253256

angularjs 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现的简单记账本应用。该应用包括记录和搜索消费的功能，并通过弹窗提示用户输入是否成功及搜索结果。文章展示了如何使用AngularJS的数据绑定和指令来构建响应式的用户界面。

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                position: relative;
            }
            ul{
                width: 400px;
                height: 300px;
                border: 1px solid #000;
            }
            li{
                list-style: none;
            }
            .pop{
                width: 300px;
                height: 200px;
                border: 1px solid #000;
                background: #eee;
                text-align: center;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -150px;
                margin-top: -100px;
            }
        </style>
        <script src="../js/lib/angular.min.js"></script>
        <script>
            var myapp=angular.module("myapp",[]);
            myapp.controller("myCtrl",function($scope){
                $scope.data=["早上花了5元早饭", "中午花了20元午饭","aa"];
                $scope.show=false;
                $scope.title="";
                $scope.btn="";
                $scope.add="";
                $scope.search="";
                //添加内容
                $scope.addFun=function(){
                    var hasLi=false;
                    if($scope.add.length==0){
                        alert("输入内容不能为空");
                    }else{
                        for(var i=0;i<$scope.data.length;i++){
                            if($scope.data[i]==$scope.add){
                                hasLi=true;
                                break;
                            }else{
                                hasLi=false;
                            }
                        }
                    }
                    if(hasLi==true){
                        $scope.show=true;
                        $scope.title="存在";
                        $scope.btn="好吧";
                    }else if($scope.add.indexOf("#")!=-1){
                        $scope.show=true;
                        $scope.title="输入了敏感字";
                        $scope.btn="很好吗？";
                    }else{
                        $scope.data.unshift($scope.add);
                        $scope.add="";
                    }
                };
                //点击好吧删除弹框
                $scope.hide=function(){
                    $scope.show=false;
                };
                //查找内容
                $scope.searchFun=function(){
                    var sea=false;
                    for(var i=0;i<$scope.data.length;i++){
                        if($scope.data[i]==$scope.search){
                            sea=true;
                            break;
                        }else{
                            sea=false;
                        }
                    }
                    if(sea==true){
                        $scope.show=true;
                        $scope.title="搜到";
                        $scope.btn="很好";
                    }else{
                        $scope.show=true;
                        $scope.title="没搜到";
                        $scope.btn="失望";
                    }
                }

            })
        </script>
    </head>
    <body ng-app="myapp" ng-controller="myCtrl">
    <h2>记账本</h2>
    <ul>
        <li ng-repeat="item in data track by $index">{{item}}</li>
    </ul>
    <div>
        <span>输入框</span><input type="text" ng-model="add"><br/>
        <button ng-click="addFun()">记录</button>
    </div>
    <div>
        <span>搜索框</span><input type="text" ng-model="search"><br/>
        <button ng-click="searchFun()">搜索</button>
    </div>
    <div class="pop" ng-show="show">
        <p>提示</p>
        <p>{{title}}</p>
        <button ng-click="hide()">{{btn}}</button>
    </div>
    </body>
    </html>