记事本-第二

来源：互联网发布：网络音乐版权编辑：程序博客网时间：2024/06/05 18:23
<!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