!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. 用GDI+画验证码

    1.新建一个窗体应用程序,在上面拖一个pictureBox对象,为其添加单击事件 2.创建GDI对象.产生随机数画入图片中.画线条.最后将图片到pictureBox中,代码如下: private vo ...

  2. 【Alpha】Daily Scrum Meeting——Day3

    站立式会议照片 1.本次会议为第三次 Meeting会议: 2.本次会议于早上9:40在陆大楼召开,本次会议为30分钟讨论昨天的任务完成情况以及接下来的任务安排. 每个人的工作分配 成 员 昨天已完成 ...

  3. 团队作业1--团队展示&选题（SNS）

    团队名称 SNS  (SAME is Not Simple,期待和而不同.共同进步) MEMBER 201421123037(captain) 201421123032 201421123034 20 ...

  4. 201521123033《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. answer: 1.2 选做:收集你认为有用的代码片段 2. 书面作业 本次作业题集集合 1.List中指定元 ...

  5. 201521123076 《Java程序设计》第7周学习总结

    1. 本周学习总结 2. 书面作业 Q1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 A:先上源代码: public boolean contains(Obje ...

  6. 201521123053 《Java程序设计》第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 答:我开始做笔记了,在本周学习中的一些笔记 * abstract关键字是为了实现 ...

  7. 201521123052 《Java程序设计》 第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...

  8. Hyperledger Fabric 1.0 从零开始（五）——运行测试e2e

    3:运行测试e2e 3.1.运行fabric-samples的问题说明 该问题说明能够解决6.1.平台特定使用的二进制文件配置第一步的问题.可以选择继续阅读该说明,或者等参考到6.1小节时再反向阅读本 ...

  9. Hibernate第七篇【对象状态、一级缓存】

    前言 本博文主要讲解Hibernate的细节-->对象的状态和一级缓存- 对象状态 Hibernate中对象的状态: - 临时/瞬时状态 - 持久化状态 - 游离状态 学习Hibernate的对 ...

  10. 《MySQL必知必会》[01] 基本查询

    <MySQL必知必会>(点击查看详情) 1.写在前面的话 这本书是一本MySQL的经典入门书籍,小小的一本,也受到众多网友推荐.之前自己学习的时候是啃的清华大学出版社的计算机系列教材< ...