<!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. 02. 爬取get请求的页面数据

    目录 02. 爬取get请求的页面数据 一.urllib库 二.由易到难的爬虫程序: 02. 爬取get请求的页面数据 一.urllib库 urllib是Python自带的一个用于爬虫的库,其主要作用 ...

  2. hadoop在线退役datanode

    退役dn2echo "dn2" >>excludes echo "dn2" >>yarn-excludes sh refresh-nam ...

  3. 【codeforces 768D】Jon and Orbs

    [题目链接]:http://codeforces.com/contest/768/problem/D [题意] 你有一个水晶; 它每天都会产生一个球??(球有k种) 然后每种球产生的可能性是相同的-& ...

  4. PatentTips - Indexes of graphics processing objects in GPU commands

    BACKGROUND A graphics processing unit (GPU) is a specialized electronic device that is specifically ...

  5. GPS时间系统概述和世界时系统

    6．1  GPS时间系统概述 时间包含"时刻"和"时间间隔"2个概念.所谓时刻,即发生某一现象的瞬间.在天文学和卫星定位中.与所获数据对应的时刻也称为历元.时间 ...

  6. [bzoj2783][JLOI2012]树_树的遍历

    树 bzoj2783 JLOI2012 题目大意:给定一棵n个点的树.求满足条件的路径条数.说一个路径是满足条件的,当且仅当这条路径上每个节点深度依次递增且点权和为S. 注释:$1\le n\le 1 ...

  7. 装饰器 转载自 http://www.cnblogs.com/huxi/archive/2011/03/01/1967600.html

    今天来讨论一下装饰器.装饰器是一个很著名的设计模式,经常被用于有切面需求的场景,较为经典的有插入日志.性能测试.事务处理等.装饰器是解决这类问题的绝佳设计,有了装饰器,我们就可以抽离出大量函数中与函数 ...

  8. Android 高亮指示层提示

    此库出自翔神之手   用起来绝对方便 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0J ...

  9. Codesys——常用快捷键列表

    F1——打开Help文档: F2——打开Input Assistant: F5——执行程序(Start): F9——添加或取消断点(Toggle Breakpoint): F8——单步进入(Step ...

  10. ConfigSections配置

    如果配置文件中包含了configSections,那么configSections的下一个节点,必须是configSections里面的元素 <configSections> <se ...