<!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. Huawei-R&S-网络工程师实验笔记20190608-VLAN划分基础（基于端口、MAC地址、子网地址、协议）

    >Huawei-R&S-网络工程师实验笔记20190608-VLAN划分基础(基于端口.MAC地址.子网地址.协议) >>实验开始,先上拓扑图参考: 一.基于端口划分VLAN ...

  2. vim学习1-入门指令

    使用vim命令进入vim界面 vim后面加上你要打开的已存在的文件名或者不存在(则作为新建文件)的文件名. 打开Xfce终端,输入以下命令 $ vim practice_1.txt 直接使用vim也可 ...

  3. Wizard's Tour

    F. Wizard's Tour time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  4. The merchant

    The merchant Time Limit: 3000MS   Memory Limit: 65536K       Description There are N cities in a cou ...

  5. 怎样跟程序猿谈一场没有Bug的恋爱

    <iframe width="580" height="90" align="center,center" id="cpro ...

  6. BZOJ 1492 货币兑换 cdq分治或平衡树维护凸包

    题意:链接 方法:cdq分治或平衡树维护凸包 解析: 这道题我拒绝写平衡树的题解,我仅仅想说splay不要写挂,insert边界条件不要忘.del点的时候不要脑抽d错.有想写平衡树的去看140142或 ...

  7. ZOJ Monthly, November 2012

    A.ZOJ 3666 Alice and Bob 组合博弈,SG函数应用 #include<vector> #include<cstdio> #include<cstri ...

  8. Zepto Code Rush 2014-A. Feed with Candy（HACK）

    A. Feed with Candy time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  9. 【面试】【Spring常见问题总结】【07】

    [常见面试问题总结文件夹>>>] 61.Spring IoC容器的依赖有两层含义: Bean依赖容器:也就是说Bean要依赖于容器,这里的依赖是指容器负责创建Bean并管理Bean的 ...

  10. 关于ffmpeg的安装具体步骤和说明

    一.windows安装: 直接下载地址: https://ffmpeg.zeranoe.com/builds/ https://ffmpeg.zeranoe.com/builds/win64/stat ...