<!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. BZOJ 3572 [HNOI2014]世界树 (虚树+DP)

    题面:BZOJ传送门 洛谷传送门 题目大意:略 细节贼多的虚树$DP$ 先考虑只有一次询问的情况 一个节点$x$可能被它子树内的一个到x距离最小的特殊点管辖,还可能被管辖fa[x]的特殊点管辖 跑两次 ...

  2. hadoop datanode usages方差算法

    stdDev 标准差(方差) 阐述及应用 简单来说,标准差是一组数值自平均值分散开来的程度的一种测量观念.一个较大的标准差,代表大部分的数值和其平均值之间差异较大:一个较小的标准差,代表这些数值较接近 ...

  3. 06007_redis数据存储类型——hash

    1.概述 (1)Redis中的Hash类型可以看成具有String Key和String Value的map容器.所以该类型非常适合于存储值对象的信息,如Username.Password和Age等: ...

  4. mybatis注解开发-动态SQL

    实体类以及表结构 在mybatis-config.xml中注册mapper接口 -------------------------- 动态查询@SelectProvider EmployeeMappe ...

  5. ansible plugins 列表

    [action plugins] [cache plugins]jsonfilememcachedmemorymongodbpickleredisyaml [callback plugins]acti ...

  6. nyoj_289_苹果_20140307

    苹果 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 ctest有n个苹果,要将它放入容量为v的背包.给出第i个苹果的大小和价钱,求出能放入背包的苹果的总价钱最大值. ...

  7. 利用DTrace实时检测MySQl

    与我们大多数人想象的不同,DTrace用于MySQL时不需对MySQL做任何更改.DTrace最强大的“提供器”(provider,是一组可观测的探测器)是FBT(Functional Boundar ...

  8. jQuery和CSS3炫酷button点击波特效

    这是一款效果很炫酷的jQuery和CSS3炫酷button点击波特效.该特效当用户在菜单button上点击的时候.从鼠标点击的点開始,会有一道光波以改点为原点向外辐射的动画效果,很绚丽. 在线演示:h ...

  9. Hilbert曲线简单介绍及生成算法

    Hilbert曲线 Hilbert曲线是一种填充曲线,相似的填充曲线还包含Z曲线.格雷码等其它方法.Hilbert曲线根据自身空间填充曲线的特性,能够线性地贯穿二维或者更高维度每一个离散单元.而且只穿 ...

  10. sharepoint类型转换

    sharepoint学习汇总 http://blog.csdn.net/qq873113580/article/details/20390149 r[col.ColumnName] = GetType ...