angular js 公告墙
| <!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 公告墙的更多相关文章
- angular.js ng-repeat渲染时出现闪烁问题解决
当我们前端运用到angular.js框架时,想必大家都会遇到一些坑.其中,我也来分享一个常见的angular.js渲染时出现的坑. 当我们进行页面渲染时,绑定表达式最开始会用{{data.name}} ...
- 史上最全的Angular.js 的学习资源
Angular.js 的一些学习资源 基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zi ...
- 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 的目的是 ...
- angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testServe
angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testSer ...
- (翻译)Angular.js为什么如此火呢？
在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...
- angular.js写法不规范导致错误
以下写法:没有明确指定module和controller,写法不规范. 更改angular.js版本会出bug. <html ng-app> <head> <title& ...
- Angular.js实现折叠按钮的经典指令.
var expanderModule=angular.module('expanderModule',[]) expanderModule.directive('expander',function( ...
- Angular.js通过bootstrap实现经典的表单提交
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...
- python , angular js 学习记录【1】
1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...
随机推荐
- uva 133(The Dole Queue UVA - 133)
一道比较难想的模拟题,用了队列等东西,发现还是挺难做的,索性直接看了刘汝佳的代码,发现还是刘汝佳厉害! 代码本身难度并不是很大,主要还是p=(p+n+d-1)%n+1;这一句有些难度,实际上经过自己的 ...
- java归并排序
代码如下: public class MergeSort { public static void mergeSort(DataWrap [] data) { sort(data , 0 , data ...
- 洛谷P1055 ISBN号码【字符数组处理】
题目描述 每一本正式出版的图书都有一个ISBN号码与之对应,ISBN码包括 99 位数字. 11 位识别码和 33 位分隔符,其规定格式如x-xxx-xxxxx-x,其中符号-就是分隔符(键盘上的减号 ...
- 【hdu 2036】改革春风吹满地
[题目链接]:http://acm.hdu.edu.cn/showproblem.php?pid=2036 [题意] 中文题 [题解] 这里用的是叉积对应的求三角形的面积; 即 A×B=A*B*sin ...
- Codeforces Round #427 (Div. 2)——ABCD
http://codeforces.com/contest/835 A.拼英语水平和手速的签到题 #include <bits/stdc++.h> using namespace std; ...
- Windows学习总结（7）——学会CMD命令提示符的重要性
作为普通电脑用户,大家接触最多的应该 是可视的操作系统界面.可是如果想真正学好计算机,学习好命令提示符可就是必不可少的.它可以更高效的帮助我们处理问题. 命令提示符是在操作系统中,提示进行命令输入的一 ...
- 4、ceph-deploy之配置使用对象存储
从firefly(v0.80)版本开始,ceph存储显著的简化了安装和配置Ceph Object Gateway, Gateway进程嵌入到Civetweb,所以你需要安装一个web服务,或者配置Fa ...
- 运维系列之二 Linux文件种类和扩展名
一.文件种类 1.普通文件 用ls查看文件属性时,显示的是[-] 2.目录文件(directory) 文件属性第一个为[d] 3.连接文件(link) 类似于win下的快捷方式,文件第一个属性为[l] ...
- asp.net--解决上传文件大小限制
原文地址 第一种方法,主要适用于IIS6.0版本 一.修改配置Web.Config文件中的httpRuntime节点 对于asp.net,默认只允许上传4M文件,增加如下配置,一般可以自定义最大文件大 ...
- [bzoj1040][ZJOI2008]骑士_树形dp_基环树_并查集
骑士 bzoj-1040 ZJOI-2008 题目大意:n个骑士,每个骑士有权值val和一个讨厌的骑士.如果一个骑士讨厌另一个骑士那么他们将不会一起出战.问出战的骑士最大atk是多少. 注释:$1\l ...