|
|
<!DOCTYPE html> |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Title</title> | |
| <style> | |
| body{ | |
| position: relative; | |
| } | |
| ul{ | |
| 400px; | |
| height: 300px; | |
| border: 1px solid #000; | |
| } | |
| li{ | |
| list-style: none; | |
| } | |
| .pop{ | |
| 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="../js/lib/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> . . . .. . .. . . . .. |