angularJs 公告墙

最新推荐文章于 2022-06-07 14:29:44 发布

神秘的玖零

最新推荐文章于 2022-06-07 14:29:44 发布

阅读量244

点赞数

文章标签： angularJs

本文链接：https://blog.csdn.net/zihang0814/article/details/78322197

版权

angularJs 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

	<!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><inputtype="text"ng-model="add"><br/>
	<button ng-click="addFun()">记录</button>
	</div>
	<div>
	<span>搜索框</span><inputtype="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>