学习angular，看到 angular-phonecat测试用例，照着教程运行了一遍，对于初学者有点不是很理解angular 帅选代码的意思，于是找教材，参考资料，明白了input筛选原来这么简单。

html部分

<!doctype html>

<html lang="en" ng-app="listModule">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>

    <script src="js/angular.js"></script>

    <script src="js/controller.js"></script>

    <title>筛选</title>

</head>

<body>

<div class="container" ng-controller="listCtrl">

    <div class="panel panel-default">

        <div class="panel-heading">input筛选</div>

        <div class="panel-body">

            <div class="row">

                <!--左侧筛选-->

                <div class="col-md-3">

                    <!--按钮组筛选-->

                    <div class="btn-group btn-group-justified form-group">

                        <div class="btn-group" ng-repeat="tab in listtab" ng-click="clicktab(tab.sex)">

                            <button type="button" class="btn btn-default">{{tab.sex}}</button>

                        </div>

                    </div>

                    <!--input筛选-->

                    <div class="form-group">

                        <input type="text" class="form-control" ng-model="text">

                    </div>

                    <!--下拉列表筛选-->

                    <div class="form-group">

                        <select ng-model="orderlist" class="form-control">

                            <option value="price">价格</option>

                            <option value="sex">sex</option>

                        </select>

                    </div>

                </div>

                <!--右侧展示内容-->

                <div class="col-md-9">

                    <div class="tab thumbnail" ng-repeat="product in list | filter:text | orderBy:orderlist | filter:filtertab">

                        <h4 class="text-danger">{{product.price | currency:"￥"}}</h4>

                        <h3 class="text">{{product.name}}</h3>

                        <p class="text-info">{{product.describe}}</p>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

</body>

</html>

html里边的几个重点是过滤这款

1.filter:text， text是左侧input输入内容这块，ng-model="text";angular自动的就筛选内容；

2.orderBy:orderlist,AngularJS中orderBy进行排序,详细内容参考：http://www.cnblogs.com/freshcoder/p/4966375.html，

　　orderlist是左侧下拉列表，下拉列表所选择的的值，值是与右侧json里的要相同，才能进行排序

3.filter:filtertab ,自定义过滤器，筛选的内容也是两个json里共有的。

controller.js

var app = angular.module('listModule',[]);

app.controller('listCtrl',function($scope,$http){

    $scope.orderlist = 'price';//下拉列表默认选中价格，默认是以价格排序的

    $http.get('data/list-tab.json').success(function(tab){//按钮组

        $scope.listtab = tab;

    });

    $http.get('data/list.json').success(function(list){//商品列表

        $scope.list = list;

    });

    // 点击导航条保存商品种类

    $scope.clicktab = function(sex){

        $scope.showsex=sex;

    };

    // 设置过滤器

    $scope.filtertab=function(product){

        // 这里相当于给全局变量赋值，product.sex ng-repeat循环出来的

        return $scope.showsex==product.sex || $scope.showsex==null;

    }

})

这里的js比较简单主要的angular都已经给封装好了，

两个json内容

[

  {"id":"","sex":"男装"},

  {"id":"","sex":"女装"},

  {"id":"","sex":"童装"}

]

[

  {"price":"33.45","name":"GXG男装 冬装新品毛衣90%白鸭绒轻薄羽绒拼接针织衫毛衫", "describe":"GXG官方旗舰店","sex":"男装"},

  {"price":"","name":"韩版秋冬时尚修身显瘦连帽小棉袄","describe":"泉山亿井旗舰店","sex":"女装"},

  {"price":"46.4","name":"一贝皇城男童小孩儿童中大童冬装","describe":"一贝皇城官方旗舰店","sex":"童装"},

  {"price":"43.45","name":"军旅式外套(MA-1)(仿皮)", "describe":"优衣库官方旗舰店","sex":"男装"},

  {"price":"","name":"太平鸟秋冬宽松半高领插肩袖套头卫衣","describe":"太平鸟官方旗舰店","sex":"女装"},

  {"price":"53.4","name":"男童加厚冬季儿童中大童棉袄","describe":"玖玖苏荣旗舰店","sex":"童装"}

]

最后截取两张效果：

angular学习input输入框筛选的更多相关文章

  1. 在CS代码页获取input输入框内肉----.net学习点滴

    想在后台cs页面得到前台页面aspx中html控件input输入的值.通过访问input输入框的name属性值获取. 解决方法如下: 1.用Request["user"].toSt ...

  2. 【转】Angular学习总结--很详细的教程

    *这篇文章是转来的,做了自己的一点修改,排版.原始出处不明,如涉及原博主版权问题,请及时告知,我将会立即删除*. 1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟 ...

  3. Angular学习

    一.Angular是什么 基于JS的框架,类似JQuery,利用数据绑定和依赖注入实现页面数据的渲染,无需人为写大量的JS,减少了代码量,优美了代码. 二.Angular优缺点 Angular适用与C ...

  4. 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

    基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下     效果图   // JavaScript Document (function($){ $.fn ...

  5. FastAdmin 开发学习给输入框加上清除功能

    FastAdmin 开发学习给输入框加上清除功能 在社区上有小伙伴询问如果给输入框加上清除功能,因为有时修重新搜索时需要将输入框的内容快速清除,所以这个功能对用户非常友好. 如上图所示这种. 我看了一 ...

  6. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  7. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  8. 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理

    编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...

  9. Angular学习资料大全和常用语法汇总（让后端程序员轻松上手）

    前言: 首先为什么要写这样的一篇文章呢?主要是因为前段时间写过一些关于Angualr的相关实战文章,有些爱学习的小伙伴对这方面比较感兴趣,但是又不知道该怎么入手(因为认识我的大多数小伙伴都是后端的同学 ...

随机推荐

  1. 笔记——shell脚本学习指南

    <shell脚本学习指南>机械工业出版 ISBN 987-7-111-25504-8 第2章 2.4 初级陷阱 1.当今的系统,对#!这一行的长度限制从63到1024个字符都有,尽量不要超 ...

  2. 彻底弄懂css中单位px和em,rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...

  3. android 图片压缩

    引用:http://104zz.iteye.com/blog/1694762 第一:我们先看下质量压缩方法: private Bitmap compressImage(Bitmap image) { ...

  4. Java表单中关于JavaScript的非空必输验证,你的程序和大牛有多少差距╮(￣▽￣")╭

    var defaultEmptyOK = false; // スペース var whitespace = " \t\n\r "; function checkNull (theFi ...

  5. ACE bus

    ACE bus增加的内容: 1):5状态的cache model 2):关于coherency的additional signal 3):两个cache master访问shared cache的ad ...

  6. mbed学习之 PWMOUT

    PWM通过一个周期内不同占空比来表征模拟量,应用非常广泛.mbed中提供了一个PWM类,来对PWM进行操作,可以分别设置占空比,周期,以及脉冲宽度. 因为这里是使用单片机内部TIM来生成PWM波的,所 ...

  7. 并发框架Disruptor浅析

    1.引言 Disruptor是一个开源的Java框架,它被设计用于在生产者—消费者(producer-consumer problem,简称PCP)问题上获得尽量高的吞吐量(TPS)和尽量低的延迟.D ...

  8. 自己动手写ORM框架

    提起ORM框架,大家都很熟悉,网上流行的ORM框架有很多,其中出名的有一些,不出名的更是数不胜数. 下面是自己实现的一个简单的ORM框架,实现了常用的增删查改功能,供大家研究ORM实现原理. 功能描述 ...

  9. 通过GitHub Pages建立个人站点总结与体会

    通过GitHub Pages建立个人站点总结与体会 ----Git+Github+Jekyll+Markdown blog Git (不会?请参照简易教程学习Git的总结) 首先感谢雨知网站作者博文指 ...

  10. input标签file的value属性IE兼容性问题

    在IE中input标签file的value属性是只读的,不能通过js来改变,如下代码在IE中就是无效的: var input = document.getElementById('file'); in ...