文章標題 AngularJs記事本 簡單實現（判斷輸入框以及查詢）
阿新 • • 發佈：2019-01-07
第一種實現方式 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="angular.js"></script> <script> var haha = 3; var app = angular.module("myApp",[]); //自定義過濾器 app.filter("myFilter",function(){ return function(text){ //alert("fasd"); if(text.indexOf("敏感字元")>=0){ //alert("asdfasdf"); alert("包含敏感字元") return text.replace(/敏感字元/g,"***"); } return text; } }); app.controller("myCtrl",function($scope){ $scope.newRecord = ""; $scope.selectRecord = ""; $scope.records = ["早上花了5塊錢吃早飯","中午花了20塊錢吃早飯"]; $scope.addRecord = function(){ if($scope.newRecord == "" || $scope.newRecord == null){ alert("輸入內容為空"); }else{ $scope.records.unshift($scope.newRecord); alert($scope.records[2]); } }; var flag = true; $scope.selectRecordMethod = function(){ for(record in $scope.records){ if($scope.records[record] == $scope.selectRecord){ alert("已經存在"); flag = false; } } if(flag){ alert("不存在"); } } /*$scope.myFilter = function(text){ var reg = /敏感字元/; if(reg.test(text)){ return text.replace(/敏感字元/g,"***"); } }*/ }); </script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <center> 記事本 <div style="width: 300px; height: 250px; border: 1 solid blue; background-color:#A6E1EC;"> <p ng-repeat="record in records ">{{record | myFilter }}</p> </div><br/> 輸入框：<input type="text" ng-model="newRecord" /><br/> <button ng-click="addRecord()">記錄</button><br/> 搜尋：<input type="text" ng-model="selectRecord" /><br/> <button ng-click="selectRecordMethod()">記錄</button> </center> </body> </html> 第二種實現方式---------------------------------------------- <!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.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>