當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

angular js 公告墙

發布時間：2023/12/24 编程问答 29 如意码农

生活随笔收集整理的這篇文章主要介紹了 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子查询