angularjs 弹框

来源：互联网发布：黑暗之魂3优化编辑：程序博客网时间：2024/05/22 13:01
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div{            width: 500px;            height:350px;            border: 1px solid #000;        }        .a{            margin-left: 150px;        }        .b{            margin-left: 250px;        }        li{            list-style:none;        }        body{          background-color: #D0EEFF;            background-size:100%;        }        input{            padding: 4px 10px;            height: 20px;            line-height: 20px;            position: relative;            cursor: pointer;            color: #888;            background: #fafafa;            border: 1px solid #ddd;            border-radius: 4px;            overflow: hidden;            display: inline-block;            *display: inline;            *zoom: 1        }        button{            position: relative;            display: inline-block;            background: #D0EEFF;            border: 1px solid #99D3F5;            border-radius: 4px;            padding: 4px 12px;            overflow: hidden;            color: #1E88C7;            text-decoration: none;            text-indent: 0;            line-height: 20px;        }    </style>    <script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>    <script>        var myapp=angular.module("myapp",[]);        myapp.controller("myCtrl",function ($scope) {            //设置数组            $scope.data=["早上花了5元钱吃早饭","中午花了20元钱吃午饭"];            //点击记录判断            $scope.start="";            $scope.add=function () {                //$scope.start="123";                // alert($scope.start);                if($scope.start==""){                    alert("输入内容不能为空");                }                for(var i=0;i<$scope.data.length;i++){                    if($scope.start==$scope.data[i]){                        alert("您记录的内容已经在")                    }                }                //输入内容敏感字符判断                if($scope.start.indexOf("#")!=-1||$scope.start.indexOf("$")!=-1||$scope.start.indexOf("%")!=-1||$scope.start.indexOf("^")!=-1||$scope.start.indexOf("&")!=-1||$scope.start.indexOf("*")!=-1){                    alert("有敏感字符，请重新输入");                }else{                    $scope.data.unshift($scope.start);                }            }            //点击查询判断            $scope.end="";            $scope.selete=function () {                if($scope.end==""){                    alert("输入内容不能为空");                }                if($scope.end.indexOf("#")!=-1||$scope.end.indexOf("$")!=-1||$scope.end.indexOf("%")!=-1||$scope.end.indexOf("^")!=-1||$scope.end.indexOf("&")!=-1||$scope.end.indexOf("*")!=-1){                    alert("有敏感字符，请重新输入");                }else{                    //搜索的判断                    for(var i=0;i<$scope.data.length;i++){                        if($scope.end==$scope.data[i]){                            alert("搜索到相关内容")                            break;                        }else{                            alert("未搜到相关内容")                            break;                        }                    }                }            }        })    </script></head><body ng-app="myapp" ng-controller="myCtrl"><p>记账本</p><div>    <ul ng-repeat="item in data">        <li>{{item}}</li>    </ul></div><span class="a">输入框</span><input type="text" ng-model="start"><br><button class="b" ng-click="add()">记录</button><br><span class="a">搜索框</span><input type="text" ng-model="end"><br><button class="b" ng-click="selete()">搜索</button></body></html>
阅读全文
0 0