AngularJS-ng-model+ng-repeat实现搜索框

<!DOCTYPE html>
<html ng-app="myapp">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/angular.min.js" ></script>
        <script>
            var app = angular.module(‘myapp‘, []);
            app.factory(‘averages‘, function(){
                var avgs = {};

                avgs.count = [
                    {
                        name : ‘zhangsan‘,
                        age : 35
                    },
                    {
                        name : ‘lisi‘,
                        age : 25
                    },
                    {
                        name : ‘wangwu‘,
                        age : 18
                    }
                ];

                return avgs;
            });

            function avgCtrl($scope, averages){
                $scope.avgs = averages;
            }
        </script>
    </head>
    <body>
        <div ng-controller="avgCtrl">
            <input type="text" ng-model="search.name" />
            <ul>
                <li ng-repeat="count in avgs.count | filter:search >
                    <h1>{{count.name }}</h1><h2>{{count.age}}</h2>
                </li>
            </ul>
        </div>
    </body>
</html>

ng-repeat可以理解为forin,当然ng-repeat要比我们所理解的forin强大的多

ng-repeat能结合过滤器实现更加功能

过滤列表:filter:search  查找匹配search的数据(如果为字符串则忽略大小写)

排序:orderBy:‘age ‘  按年龄升序排序,orderBy:‘-age ‘  按年龄降序排序

列表截取:limitTo:2 按正序显示2条数据 limitTo:-2 按逆序显示2条数据

其他过滤器:

时间戳格式化:date 例子{{ timestamp(时间戳) | date: ‘yyyy-MM-dd  HH:mm:ss’}}

大小写:lowercase ,uppercase 例子:{{ ‘abc’ | uppercase }}

AngularJS-ng-model+ng-repeat实现搜索框,布布扣,bubuko.com

时间: 06-17

AngularJS-ng-model+ng-repeat实现搜索框的相关文章

angularjs material 实现搜索框

Material 提供了大量的android 风格的UI组件,使用 angularjs + Material 可以很容易开发出风格接近原生 Android 5.x 的web界面.但在实际使用的过程中并不总是能满足我们的需求.开发一个组件就成了我们必须学习的内容. 下面是一个组件的实现: //前面省略若干代码 directive('mdSearchInput',[function(){ return{ restrict:'E', controller:['$scope','$timeout',fu

【AngularJs】---&quot;Error: [ng:areq] Argument &#39;fn&#39; is not a function, got Object&quot;

项目中把controller.service抽取出来 一步一步没有报错 index那里加 <script src="js/controllers/XXController.js"></script>就报错了 [原因] 我抽取出来的controller头部也这样写了 angular.module('gflt.controllers', []) 正确写法 angular.module('gflt.controllers') [AngularJs]---"E

angular 中怎么获取路径上的参数 参考:https://docs.angularjs.org/api/ng/service/$location

参考: https://docs.angularjs.org/api/ng/service/$location 原文地址:https://www.cnblogs.com/lshan/p/8855042.html

jQuery+HTML5弹出创意搜索框层

效果体验:http://hovertree.com/texiao/jquery/26/ 本效果适用于移动设备,可以使用手机等浏览效果. 代码下载:http://hovertree.com/h/bjaf/e14uccpw.htm HTML代码如下: 1 <!doctype html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-

Android----- 改变图标原有颜色 和 搜索框

本博客主要讲以下两点知识点 图标改变颜色:Drawable的变色,让Android也能有iOS那么方便的图片色调转换,就像同一个图标,但是有多个地方使用,并且颜色不一样,就可以用这个方法了. 搜索框: 一般是EditText实现,本文 实现 TextView图片和文字居中,键盘搜索. 来看看效果图: 图标改变颜色:第一个界面的左边(二维码)和右边(更多)两个实现,我放进去的图片是黑色的,显示出来是白色的. 搜索框:第一个界面的图片和文字居中,还可以设置间距,第二个见面搜索设置键盘搜索按钮,点击搜

js 百度云搜索框

// ==UserScript==// @name 百度云插件+APIKey// @namespace // @version 5.0.2.1// @description 在百度云网盘的页面添加一个搜索框,调用搜索API搜索所有公开分享文件// To add a search frame that calls some api for searching some public shared files in BaiduYun cloud netdisk. // @include /https

Android零基础入门第62节:搜索框组件SearchView

原文:Android零基础入门第62节:搜索框组件SearchView 一.SearchView概述 SearchView是搜索框组件,它可以让用户在文本框内输入文字,并允许通过监听器监控用户输入,当用户输入完成后提交搜索时,也可通过监听器执行实际的搜索. SearchView默认是展示一个search的icon,点击icon展开搜索框,也可以自己设定图标.用SearchView时可指定如下表所示的常见XML属性及相关方法. 如果为SearchView增加一个配套的ListView,则可以为Se

模糊查询(类似百度搜索框)

很常见的搜索框,很常用,总结一下,怕自己忘了,使用的是原生的js. 这是原生写的,代码很简单,重要是思路.主要就是用了一个indexOf(),很简单.越简单的东西越难想到,很多人都会想到用正则去做,这样就舍近求远了. html部分: <div id="box"> <input type="text" id="txt" value = ""> <input type="button&quo

微信小程序开发之带搜索记录的搜索框

实现功能:点击搜索框,有搜索记录时以下拉菜单显示,点击下拉子菜单,将数据赋值到搜索框,点击搜索图标搜索,支持清空历史记录,可手动输入和清空查询关键字, UI: wxml: <!--查询历史记录数据--><view class="ddclass" style="margin-left: 50rpx;z-index:80" hidden="{{!StorageFlag}}" style="z-index:100"

POST注入--搜索框

POST注入的分类有很多: 搜索框 登录框 认证框 还有XXXX,总之什么情况就是什么注入 言而总之,都他么一样,不就是POST传数据的时候动点手脚么? 写了个简单的搜索框注入的网页: 代码折叠了,大家展开看 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>搜索型注入</title> 5 <meta charset="utf-8"> 6 </head> 7 &l