<!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 公告墙的更多相关文章

  1. angular.js ng-repeat渲染时出现闪烁问题解决

    当我们前端运用到angular.js框架时,想必大家都会遇到一些坑.其中,我也来分享一个常见的angular.js渲染时出现的坑. 当我们进行页面渲染时,绑定表达式最开始会用{{data.name}} ...

  2. 史上最全的Angular.js 的学习资源

    Angular.js 的一些学习资源 基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zi ...

  3. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  4. angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testServe

    angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testSer ...

  5. (翻译)Angular.js为什么如此火呢？

    在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...

  6. angular.js写法不规范导致错误

    以下写法:没有明确指定module和controller,写法不规范. 更改angular.js版本会出bug. <html ng-app> <head> <title& ...

  7. Angular.js实现折叠按钮的经典指令.

    var expanderModule=angular.module('expanderModule',[]) expanderModule.directive('expander',function( ...

  8. Angular.js通过bootstrap实现经典的表单提交

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...

  9. python , angular js 学习记录【1】

    1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...

随机推荐

  1. Luogu P1041 [2003NOIP提高组]传染病控制

    P1041 传染病控制 题目背景 近来,一种新的传染病肆虐全球.蓬莱国也发现了零星感染者,为防止该病在蓬莱国大范围流行,该国政府决定不惜一切代价控制传染病的蔓延.不幸的是,由于人们尚未完全认识这种传染 ...

  2. 18清明校内测试T1

    消失的数字(number) Time Limit:1000ms   Memory Limit:128MB 题目描述 rsy拥有n个数,这n个数分别是a1,a2,…,an. 后来出现了一个熊孩子zhw, ...

  3. 三、Scrapy中选择器用法

    官方示例源码<html> <head>  <base href='http://example.com/' />  <title>Example web ...

  4. 【模板】求1~n的整数的乘法逆元

    洛谷3811 先用n!p-2求出n!的乘法逆元 因为有(i-1)!-1=i!-1*i (mod p),于是我们可以O(n)求出i!-1 再用i!-1*(i-1)!=i-1 (mod p)即是答案 #i ...

  5. linux学习6-简单的文本处理

    简单的文本处理 实验介绍 这一节我们将介绍这几个命令tr(注意不是tar),col,join,paste.实际这一节是上一节关于能实现管道操作的命令的延续,所以我们依然将结合管道来熟悉这些命令的使用. ...

  6. [国家集训队2012]tree(陈立杰)

    [国家集训队2012]tree(陈立杰) 题目 给你一个无向带权连通图,每条边是黑色或白色.让你求一棵最小权的恰好有need条白色边的生成树.题目保证有解. INPUT 第一行V,E,need分别表示 ...

  7. pandas中选取某行为缺失值的数据，并返回

    1.df.dropna() 可以返回去掉NaN的df结果集. 2.pandas中dataframe取差集: df=pd.DataFrame({"name":[1,2,3,np.Na ...

  8. 利用rsync如何同步单个文件

    rsync -vzrtopg --progress --include-from=/home/test/include.list --exclude=/* root@192.168.30.179::b ...

  9. N天学习一个linux命令之du

    用途 统计文件或者目录占用硬盘空间大小 用法 du [OPTION] [FILE]du [OPTION] --files0-from=F 常用参数 -a, --all统计所有文件,不仅仅是目录 -b, ...

  10. insert into varchar2(8000)

    在看12c的文档的时候发现varcahr2最大长度是4000 byte VARCHAR2 Data Type The VARCHAR2 data type specifies a variable-l ...