!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. JavaScript封装一个MyAlert弹出框

    平时我们想要显示一些提示信息时会用到alert方法,alert是全局的一个方法,会短暂的中断程序,我们主要用来显示提示客户信息.但是这个方法有一定的局限性,而且本身样式也不够美观.于是我封装了一个实用 ...

  2. 封装bootstrap-treegrid组件

    封装bootstrap-treegrid组件   阅读目录 一.开源的treegrid 1.组件效果预览 2.组件开源地址 二.封装treegrid 1.组件封装的必要性 2.组件封装代码示例 3.封 ...

  3. 转：【Java并发编程】之九：死锁（含代码）

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17200937 当线程需要同时持有多个锁时,有可能产生死锁.考虑如下情形: 线程A当前持有互 ...

  4. 个人作业3——个人总结(Alphe)

    小结: 1.软件工程的第一阶段终于结束了,说实话,每个人的课程都很紧张,在这么紧张的时期我们都每周抽出一些时间来开个小会总结或者计划软件工程的相关任何非常难得,大家的态度都诚恳认真,我亦是如此,只是我 ...

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

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...

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

     1. 本章学习总结 (1)认识PATH和CLASSPATH (2)SET PATH/CLASSPATH和-cp的用法 (3)了解BigDecimal.BigInteger.ArrayList/Lis ...

  7. 201521123038 《Java程序设计》 第一周学习总结

    201521123038 <Java程序设计> 第一周学习总结 1.本章学习总结 本周已掌握Java配置,初步认识Java运行软件和基本语法. Java语言语法和C语言基本类似,部分不同. ...

  8. 201521123068《Java程序设计》第1周学习总结

    1. 本周学习总结 Java是各个应用平台的基础,学习了解Java SE以奠定基础: 使用Myeclipse 或者Eclipse 进行编程: Java语言具有平台无关性.面对对象(封装.继承.多态). ...

  9. Junit4学习（三）Junit运行流程

    一,验证Junit测试方法的流程 1,在test/com.duo.util右键,新建测试类 2,生成后的代码: package com.duo.util; import static org.juni ...

  10. Java :BufferedWriter类和BufferedReader类的构造方法、主要方法

    BufferedWriter 和 BufferedReader 为带有默认缓冲的字符输出输入流,因为有缓冲区所以效率比没有缓冲区的高. 一.BufferedWriter 类 构造方法:buffered ...