angular js 公告墙
生活随笔
收集整理的這篇文章主要介紹了
angular js 公告墙
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
| <!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="../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> . . . .. . .. . . . .. |
總結
以上是生活随笔為你收集整理的angular js 公告墙的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Static Class （静态类）
- 下一篇： 6-SQL子查询