前端_填加数据_提示对话框

最新推荐文章于 2023-08-28 16:07:29 发布

哥哥儿

最新推荐文章于 2023-08-28 16:07:29 发布

阅读量420

点赞数

本文链接：https://blog.csdn.net/qq_39707849/article/details/78248850

版权

<!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="../angular-1.5.5/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>

哥哥儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端_填加数据_提示对话框

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> body { position: relative; } ul { width: 400px; hei
复制链接

扫一扫