angular记事本

来源：互联网发布：网络团队介绍页面源码编辑：程序博客网时间：2024/06/06 01:12
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <script src="angular-1.3.0.js"></script>    <title>记事本界面</title>    <style>        .notestyle{            width: 250px;            height: 250px;            border: solid 1px #ff0000;        }        #dialog {            width: 160px;            height: 160px;            position: absolute;            top: 20px;            left: 150px;            border: 1px solid #999;            background-color: yellow;        }    </style>    <script type="text/javascript">        var app = angular.module("myApp",[]);        app.constant("tishi",{            add_null:{                msg: "请输入记录内容",                btnTips: "好吧"            },            add_chongfu:{                msg: "您记录的内容已经存在",                btnTips: "好吧"            },            sou_null:{                msg: "请输入搜索内容",                btnTips: "好吧"            },            sou_success:{                msg: "搜到相关内容",                btnTips: "很好"            },            sou_wu:{                msg: "未搜到相关内容",                btnTips: "失望"            }        });        app.controller("noteCtrl",function($scope,tishi){            var diglogShow=function(tishi){                $scope.dig_message=tishi.msg;                $scope.dig_but=tishi.btnTips;                $scope.is_show=true;            };            $scope.diglogbutton=function(){                $scope.is_show=false;            };            $scope.notelist = [];            $scope.addNote=function(){                if($scope.note == undefined){                    diglogShow(tishi.add_null);                    return;                }                var a = $scope.note.trim();                if(a.length == 0){                    diglogShow(tishi.add_null);                    return;                }                if( $scope.notelist.indexOf(a)>=0){                    diglogShow(tishi.add_chongfu);                    $scope.note="";                    return;                }                $scope.notelist.push($scope.note);                $scope.note="";            };            $scope.sousuo=function(){                if($scope.sou_note == undefined){                    diglogShow(tishi.sou_null);                }                var a = $scope.sou_note.trim();                if(a.length == 0){                    diglogShow(tishi.sou_null);                    return;                }                if($scope.notelist.indexOf(a)>=0){                    diglogShow(tishi.sou_success);                    $scope.sou_note="";                    return;                }else{                    diglogShow(tishi.sou_wu);                    $scope.sou_note="";                    return;                }            };        });        app.filter("frl",function () {            return function (mag,flag) {                return mag.replace(/法|枪|二傻子/g,flag);            }        });    </script></head><body ng-app="myApp">   <div ng-controller="noteCtrl">       <h3>记事本</h3>       <div class="notestyle">           <ul>               <li ng-repeat="x in notelist">{{x| frl:"*"}}</li>           </ul>       </div>       <div>输入框<input type="text" ng-model="note"></div>       <div><button ng-click="addNote()">记录</button></div>       <div>搜索框<input type="text" ng-model="sou_note"></div>       <div><button ng-click="sousuo()">搜索</button></div>       <div ng-if="is_show" id="dialog">           <h3>提示</h3><br>           <h5>{{dig_message}}</h5><br>           <button ng-click="diglogbutton()">{{dig_but}}</button>       </div>   </div></body></html>
阅读全文
0 0