z2

最新推荐文章于 2025-04-30 09:32:09 发布

为你为我

最新推荐文章于 2025-04-30 09:32:09 发布

阅读量360

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Mynamezhuang/article/details/78248651

本文介绍了一个使用AngularJS开发的简易记账本应用程序。该应用允许用户输入内容并将其保存到列表中，同时提供了搜索功能来查找已记录的内容。文章通过实际案例展示了如何运用AngularJS实现前端数据绑定及控制器等核心功能。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        li{
            padding: 5px;
            list-style: none;
        }
        .box{
            width: 500px;
            height: 1000px;
            display: block;
            margin: 100px auto;
        }
        .box2{
            height: 120px;
            width: 200px;
            display: block;
            border: 1px solid black;
        }
        .buttons{
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin-top: 30px;
        }
        .box3{
            height: 120px;
            width: 200px;
            display: block;
            border: 1px solid black;
        }
        .box4{
            height: 120px;
            width: 200px;
            display: block;
            border: 1px solid black;
        }
    </style>
    <script src="angular-1.5.5/angular.min.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function ($scope) {
            $scope.arr=[];
            $scope.cunzai=false;

            $scope.btn=function () {
                if($scope.inputs.indexOf("#")==-1){
                    confirm("您记录的内容已记录");
//                    $scope.cunzai=true;
                    $scope.arr.unshift($scope.inputs);
                }else{
                    alert("不能输入敏感字#");
                }
                if($scope.inputs==$scope.arr){
                    $scope.cunzai=true;
                }

                $scope.inputs=null;
                if($scope.inputs==""){
                    console.log($scope.inputs);
                    confirm("输入的不能为空");
                }
            };
            $scope.finds=function () {

                if($scope.find== $scope.arr){
                    alert("搜索到相关内容");
                    $scope.cunzai3=true;

                }else{
                    alert("没有找到相关内容")
                    $scope.cunzai4=true;
                }


            }
            $scope.ok=function () {
                $scope.cunzai=false;
            }
            $scope.very=function () {
                $scope.cunzai3=false;
            }
            $scope.no

                =function () {
                $scope.cunzai4=false;
            }

        })
    </script>

</head>
<body ng-app="myapp" ng-controller="myCtrl">
<div class="box">
    记账本<br>
    <ul ng-model="search">
        <li ng-repeat="item in arr track by $index">{{item}}</li>
    </ul>
    输入框<input type="text" ng-model="inputs"><br>
    <button ng-click="btn()">记录</button><br>
    <div class="box2" ng-if="cunzai">
        <h4>提示</h4>
        <p>您记录的已存在</p>
        <button style="width: 100%" class="buttons" ng-click="ok()">好吧</button>
    </div>
    搜索框<input type="text" ng-model="find"><br>
    <button ng-click="finds()">搜索</button>
    <div class="box3" ng-if="cunzai3">
        <h4>提示</h4>
        <p>搜到相关内容</p>
        <button style="width: 100%" class="buttons" ng-click="very()">很好</button>
    </div>
    <div class="box4" ng-if="cunzai4">
        <h4>提示</h4>
        <p>没有搜到相关内容</p>
        <button style="width: 100%" class="buttons" ng-click="no()">失望</button>
    </div>
</div>
</body>
</html>