学习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. OpenCV整体的模块架构

    之前啃了不少OpenCV的官方文档,发现如果了解了一些OpenCV整体的模块架构后,再重点学习自己感兴趣的部分的话,就会有一览众山小的感觉,于是,就决定写出这篇文章,作为启程OpenCV系列博文的第二 ...

  2. js事件监听/鼠标滚轮/行为/冒泡/键盘的兼容性写法

    addEvent:function(el,type,fn,capture) { if (window.addEventListener) { if (type === "mousewheel ...

  3. Application Engine

    Exit(1) : Terminate the AE immediately and rollback all DB changes madeexit(0) : Terminate the AE im ...

  4. SSM——（二）：easyUI的CRUD

    1.在WebContent下新建admin目录,添加index.html(用来显示user表的CRUD): 总结: 1.datagrid接收的必须是json数据: 2.使用分页插件会自动向后台传递St ...

  5. HTML5表单那些事

    //一般写法 <form method="post" action="http://xxx:port/form"></form> //高 ...

  6. PL/SQL Developer主数据库连接和窗口连接切换

    Oracle开发者估计对PL/SQL Developer都非常熟悉了,里面有些小的功能点大概还有些初学者没发现.PL/SQL Developer支持多连接多窗口,下面详细说说. 主连接的概念 打开PL ...

  7. IFRAM随内部长宽高变化

    <iframe src="" id="iframe_CustomerVisitRecord" width="700" height=& ...

  8. PHP获取时间、时间戳的各种格式

    1.获取当前时间方法date() 很简单,这就是获取时间的方法,格式为:date($format, $timestamp),format为格式.timestamp为时间戳--可填参数. 2.获取时间戳 ...

  9. 【GO】GO语言学习笔记四

    流程控制 1.条件语句 举个栗子: if x>5 { return 1; }else{ return 0; } 注意:  条件语句不需要使用括号将条件包含起来(); 无论语句体内有几条语句, ...

  10. mySQL函数根据经纬度计算两点距离

    DROP FUNCTION IF EXISTS func_calcDistance ; CREATE FUNCTION func_calcDistance( origLng ,), -- 目的地经度 ...