学习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. Excel标题与索引的对应关系

    /// <summary> /// 返回对应标题的索引 /// </summary> /// <param name="columnTitle"> ...

  2. Windows Phone 八、文件读写IO

    文件存储的类型 •本地应用文件: •ApplicationData.Current.LocalFolder: •漫游应用文件: •ApplicationData.Current.RoamingFold ...

  3. uexQQ插件学习心得

    uexQQ插件学习心得 uexQQ插件的作用:通过qq可以分享图文,音乐,应用到相应的qq空间.支持手机客户端分享和手机webQQ分享.下面我们就来看一看他的一些方法. 我们先说一下分享的步骤,这个步 ...

  4. 项目中如何GB2312转UTF-8

    $str = mb_convert_encoding($str, "gb2312", "UTF-8"); // 这是一个PHP 自带函数 参数1 是要转的字符, ...

  5. Hdu 5493 合肥网络赛 1010 Queue

    在线求第k大,第一次用二分+树状数组写...比赛的时候分治啊,splay啊,主席树啊换来换去,然而以前为什么不知道可以这么写... #include <iostream> #include ...

  6. Windows下底层数据包发送实战

    1.简介 所谓“底层数据包”指的是在“运行”于数据链路层的数据包,简单的说就是“以太网帧”,而我们常用的Socket只能发送“运行”在传输层的TCP.UDP等包,这些传输层数据包已经能满足绝大部分需求 ...

  7. nginx+iis、NLB、Web Farm、Web Garden、ARR

    nginx+iis实现负载均衡 在win2008R2上使用(NLB)网络负载均衡 NLB网路负载均衡管理器详解 [译文]Web Farm和Web Garden的区别? IIS负载均衡-Applicat ...

  8. tomcat部署https+TLS 1.2+Apple ATS支持

    因为苹果ATS的要求, tomcat服务器要求上https+TLS1.2, 前面搞定了https,但是tls一直是1.0, 甚至把跑了一年的服务器重启了, 不解决问题. 思路如下: 1. 将openJ ...

  9. 生成javadoc

    javadoc可以很方便的用来生成一些接口文档. 操作步骤: 1.export->javadoc 2.选择导出的位置 3.确定导出 常见异常: 1. 软件包 javax.servlet.http ...

  10. Android4.0 添加一个新的Android 键值

    这里添加新的键值,不是毫无凭据凭空创造的一个键值,而是根据kernel中检测到的按键值,然后转化为Android所需要的数值: 以添加一个Linux键值为217,把它映射为android的键值Brow ...