!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. python re group()

    python group() 正则表达式中,group()用来提出分组截获的字符串,()用来分组 import re a = "123abc456" print re.search ...

  2. 201521123013 《Java程序设计》第2周学习总结

    1. 本章学习总结 1.final声明,一旦赋值不能被改变.移位运算符的应用,负数右移高位补"1",正数右移高位补"1".利用移位运算,按位与运算可以方便得出整 ...

  3. 201521123018 《Java程序设计》第1周学习总结

    1. 本章学习总结 *Java程序的特点 *可以跨平台运行 *语言简单 *利用控制台运行java程序 *cmd调出控制台->用javac指令编译源代码->用java指令运行 2. 书面作业 ...

  4. 201521123067 《Java程序设计》第12周学习总结

    201521123067 <Java程序设计>第12周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对 ...

  5. 201521123121 《Java程序设计》第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 数据库的基本特点 1.实现数据共享 数据共享包含所有用户可同时存取数据库中的数据,也包括用户可以用各种方式通过接 ...

  6. tsst

    import java.util.ArrayList; import java.util.Collections; import java.util.List; import java.util.Sc ...

  7. AIX盘rw_timeout值过小导致IO ERROR

    刚下班没多久,接收到告警提示数据库的数据文件异常,且同时收到主机硬盘的IO ERROR告警 该数据库服务器为AIX+oracle 9i环境,登录主机验证关键日志告警 发现确实在18点48分有磁盘IO的 ...

  8. 聊聊React高阶组件(Higher-Order Components)

    使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...

  9. org.springframework.expression.spel.SpelEvaluationException: EL1011E: Method call: Attempted to call method test() on null context object

    前言 本文中提到的解决方案,源码地址在:springboot-thymeleaf,希望可以帮你解决问题. 至于为什么已经写了一篇文章thymeleaf模板引擎调用java类中的方法,又多此一举的单独整 ...

  10. 鸟哥Linux学习笔记07

    1, vi 是 老式的文字处理器,不过功能已经很齐全了,但是还是有可以进步的地方. vim可以说是程序开发者的一项很好用的工具,vim官网(http://www.vim.org)自己也说vim是一个“ ...