<!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>
前端_填加数据_提示对话框
最新推荐文章于 2023-08-28 16:07:29 发布