!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实现输入框输入添加 搜索框查询的更多相关文章

  1. C# 动态生成word文档 [C#学习笔记3]关于Main(string[ ] args)中args命令行参数 实现DataTables搜索框查询结果高亮显示 二维码神器QRCoder Asp.net MVC 中 CodeFirst 开发模式实例

    C# 动态生成word文档 本文以一个简单的小例子,简述利用C#语言开发word表格相关的知识,仅供学习分享使用,如有不足之处,还请指正. 在工程中引用word的动态库 在项目中,点击项目名称右键-- ...

  2. 实现DataTables搜索框查询结果高亮显示

    DataTables是封装好的HTML表格插件,丰富了HTML表格的样式,提供了即时搜索.分页等多种表格高级功能.用户可以编写很少的代码(甚至只是使用官方的示例代码),做出一个漂亮的表格以展示数据.关 ...

  3. WPF实用指南一：在WPF窗体的边框中添加搜索框和按钮

    原文:WPF实用指南一:在WPF窗体的边框中添加搜索框和按钮 在边框中加入一些元素,在应用程序的界面设计中,已经开始流行起来.特别是在浏览器(Crome,IE,Firefox,Opera)中都有应用. ...

  4. python selenium 时间搜索框查询和日期大小比较

    在做selenium自动化的时候遇到 时间搜索框查询(如下图)并比较查询结果是否在输入的时间之类. 首先,第一步要做的就是选择时间,并获取到所选时间的文本信息 如上图所示,获取到的时间搜索框并没有文本 ...

  5. extjs在窗体中添加搜索框

    在extjs中添加搜索框,搜索框代码如下: this.searchField = new Ext.ux.form.SearchField({            store : this.store ...

  6. IOS第二天-新浪微博 - 添加搜索框，弹出下拉菜单 ，代理的使用 ，HWTabBar.h（自定义TabBar）

    ********HWDiscoverViewController.m(发现) - (void)viewDidLoad { [super viewDidLoad]; // 创建搜索框对象 HWSearc ...

  7. select2搜索框查询加遍历

    <div class="form-group"> <label class="control-label col-sm-1 no-padding-rig ...

  8. easyui datagrid toolbar 添加搜索框

    最近用到了就研究了下,效果  把列名稍加转换放入menubtton,对于单项搜索来说还是非常方便的 var fields =  $('#tt').datagrid('getColumnFields') ...

  9. iOS之搜索框UISearchController的使用(iOS8.0以后替代UISearchBar+display)

    在iOS 8.0以上版本中, 我们可以使用UISearchController来非常方便地在UITableView中添加搜索框. 而在之前版本中, 我们还是必须使用UISearchBar + UISe ...

随机推荐

  1. 我的hibernate学习记录（二）

    通过上一篇文章我的hibernate学习记录(一)基本上的入门了hibernate,但是,里面还有还多东西是通过迷迷糊糊的记忆,或者说copy直接弄进去的,所以这篇文章就需要对上篇的一些文件.对象进行 ...

  2. JS中event.keyCode用法及keyCode对…

    js中event.keyCode用法及keyCode对照表 标签: javascriptJavaScriptJavascriptjavaScript 2012-12-11 15:11 HTML Jav ...

  3. mysql中int(10)与int(11)有什么区别吗？

    先来看下面的图片 声明字段是int类型的那一刻起,int就是占四个字节,一个字节8位,也就是4*8=32,可以表示的数字个数是2的32次方(2^32 = 4 294 967 296个数字). 4 29 ...

  4. SNS团队第一次站立会议（2017.04.22）

    一.当天站立式会议照片 本次会议主要内容:进一步明确了团队中各个成员的定位,说明了下一步团队工作的方向 二.每个人的工作 成员 昨天已完成的工作 今天计划完成的工作 罗于婕 系统架构设计及项目数据库设 ...

  5. 团队作业9——展示博客（Beta版本）

    展示博客 1.团队成员的简介和个人博客地址,团队的源码仓库地址. 何琴琴(http://www.cnblogs.com/vviane/): 领导项目进行,协调各队员之间的矛盾合作,负责测试与需求分析. ...

  6. 201521123106 《Java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...

  7. 201521123050 《Java程序设计》第11周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synchronized修饰方法实现互斥同步访问,还 ...

  8. 201521123026《JAVA程序设计》第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...

  9. Lucene第一篇【介绍Lucene、快速入门】

    什么是Lucene?? Lucene是apache软件基金会发布的一个开放源代码的全文检索引擎工具包,由资深全文检索专家Doug Cutting所撰写,它是一个全文检索引擎的架构,提供了完整的创建索引 ...

  10. org.hibernate.HibernateException: No Hibernate Session bound to thread, and configuration does not a

    如果出现了这个错误,看看在使用Hibernate的时候有没有在事务的环境下执行操作!