学习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. eclipse tomcat 集成

    1. 下载 Tomcat        作者选择的是 Tomcat6,下载地址:http://tomcat.apache.org/download-60.cgi,选择绿色版的 zip 进行下载(目前最 ...

  2. 利用zlib库进行zip解压

    1:到zlib官网上下载zlib,本文下载的是1.2.8的版本. 2:进行./configure,然后make. 3:进入zlib库中的contrib/minizip/路径下make,生成的miniz ...

  3. paper 128：奇异值分解(SVD) --- 线性变换几何意义[转]

    PS:一直以来对SVD分解似懂非懂,此文为译文,原文以细致的分析+大量的可视化图形演示了SVD的几何意义.能在有限的篇幅把这个问题讲解的如此清晰,实属不易.原文举了一个简单的图像处理问题,简单形象,真 ...

  4. maven创建的Web工程，Eclipse 内 tomcat容器不识别的处理方法

    相信很多人都遇到这个问题,简单的说明下处理方式 前提是maven配置都是ok的,这里不多说了 1.创建web工程 mvn archetype:create -DgroupId=com.XXX.YYY ...

  5. spring-cloud-event-sourcing-example-master 运行效果及说明

    1.微服务架构下电商示例,部署成功!监控等技术细节未深入研究.      简单介绍:             配置服务(config-service ),端口8888,健康检查 xx:8888/hea ...

  6. VB.NET中Form窗体运行时，按ESC退出全屏状态

    1.在其KeyDown事件添加: If e.KeyValue = 27 Then Me.FormBorderStyle = Windows.Forms.FormBorderStyle.Sizable ...

  7. CentOS搭建GitLab服务器

    以下为CentOS7下安装GitLab7.4.3的全部流程 1.切换到root用户su root2.下载并安装GitLabcurl -O https://downloads-packages.s3.a ...

  8. u-boot移植 II

    下面是韦老师的uboot移植攻略: A. 开发板的相关拷贝与修改 1. 在board文件夹下面, 将原来的smdk2410复制为100ask24x0目录, 并将smdk2410.c改名为100ask2 ...

  9. SeleniumIDE从0到1 （Selenium IDE 录制）

    seleniumIDE安装成功后下面我们用百度网址来简单录制下: 简介一:百度输入框录制操作 1.打开SeleniumIDE 2.SeleniumIDE地址栏中输入百度网址:[https://www. ...

  10. 空格哥的第一篇Blog

    首先十分感谢博客园在这里给我的平台,我在这里学习到了很多东西,响应的,我也想要在这里记录下自己的心路历程!在学习的过程中,希望博客园一直陪伴我,小弟在这里不胜感激!这是小弟的第一篇博客,很多东西都不是 ...