<!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. Scrapy Item用法示例（保存item到MySQL数据库，MongoDB数据库，使用官方组件下载图片）

    需要学习的地方: 保存item到MySQL数据库,MongoDB数据库,下载图片 1.爬虫文件images.py # -*- coding: utf-8 -*- from scrapy import ...

  2. git 的简单使用(3)

    Git鼓励大量使用分支: 查看分支:git branch 创建分支:git branch <name> 切换分支:git checkout <name> 创建+切换分支:git ...

  3. Huawei-R&S-网络工程师实验笔记20190530-FTP上传下载、STelnet登录、SFTP登录

    >Huawei-R&S-网络工程师实验笔记20190530-FTP上传下载.STelnet登录.SFTP登录 >>实验开始,参考<Huawei-R&S-网络工程 ...

  4. Java基础学习总结（70）——开发Java项目常用的工具汇总

    要想全面了解java开发工具,我们首先需要先了解一下java程序的开发过程,通过这个过程我们能够了解到java开发都需要用到那些工具. 首先我们先了解完整项目开发过程,如图所示: 从上图中我们能看到一 ...

  5. Redis学习总结（1）——Redis内存数据库详细教程

    1.redis是什么 2.redis的作者何许人也 3.谁在使用redis 4.学会安装redis 5.学会启动redis 6.使用redis客户端 7.redis数据结构 – 简介 8.redis数 ...

  6. 玲珑杯1147 - 最后你还是AK了

    1147 - 最后你还是AK了 Time Limit:5s Memory Limit:256MByte DESCRIPTION 今天HHHH遇到了一颗树,这个树有nn个点(nn为偶数),每条边都有一个 ...

  7. 运维系列之一 Linux的文件与目录权限解析

    在Linux中,万事万物皆文件,普通文件是文件,目录是文件,硬件设备也是文件,因此学习了解Linux中的文件非常重要. Linux中有三种文件类型: (1) 普通文件:又分为文本文件和二进制文件 (2 ...

  8. hdu_1005_Number Sequence_201310222120

    Number Sequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  9. Spring MVC-集成（Integration）-生成XML示例（转载实践）

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_xml.htm 说明:示例基于Spring MVC 4.1.6. 以下示例说明如何 ...

  10. 开源 免费 java CMS - FreeCMS1.8 留言管理

    项目地址:http://code.google.com/p/freecms/ 留言管理 管理当前管理网站的留言数据. 1. 回复留言 选择须要回复的留言.然后点击"回复". 注意: ...