!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. css浮动Float

    核心:浮动元素会脱离文档流并向左/向右移动,直到碰到父元素或者另外一个浮动元素. float :left 向左浮动 right 向右浮动 none (默认)     inherit  继承父元素 fl ...

  2. Swing-JComboBox用法-入门

    JComboBox是Swing中的下拉菜单控件.它永远只能选中一个项目,然而比单选按钮节省空间.如果使用setEditable设置为true则内部选项的文本可以编辑,因此这种组件被称为组合框.注意,对 ...

  3. 201521123025《java程序设计》第七周学习总结

    1. 本周学习总结 2. 书面作业 Q1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 public boolean contains(Object o) { r ...

  4. 201521123068《Java程序设计》第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 点击->面向对象学习 2. 书面作业 1.clone ...

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

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

  6. iOS启动图-从网络获取的gif图，在本地一直是没有动画，还模糊的

    背景介绍:APP启动页,常有静态图加链接,gif加链接,短视频等几种形式.我们APP前期只有静态图这一种,功能已经实现.之后,有了添加gif的需求,按理说,只要添加一个类型判断,按照数据类型,通过不同 ...

  7. Hibernate第十篇【Hibernate查询详解、分页查询】

    前言 在Hibernate的第二篇中只是简单地说了Hibernate的几种查询方式-.到目前为止,我们都是使用一些简单的主键查询阿-使用HQL查询所有的数据-.本博文主要讲解Hibernate的查询操 ...

  8. Spring - Spring容器概念及其初始化过程

    引言 工作4年多,做了3年的java,每个项目都用Spring,但对Spring一直都是知其然而不知其所以然.鄙人深知Spring是一个高深的框架,正好近期脱离加班的苦逼状态,遂决定从Spring的官 ...

  9. ambari

    http://blog.csdn.net/ggz631047367/article/details/50491616 https://cwiki.apache.org/confluence/displ ...

  10. 关于XCode9的一些问题

    最近几天一直在做一项工作,为新项目在做搭建框架的前期准备,然后恰逢更新iOS11和XCode9,笔者心急的尝了个先,发现了一些问题,记录一下,如果有相同问题的程序猿,也可以参考一下. 目前问题遇到两点 ...