学习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. 关于hasNextInt判断后无限循环输出else项的解决办法

    话不多说,上来就是干! import java.util.Scanner; public class Test_hasNextInt { /** * @param args */ public sta ...

  2. HTML5&CSS3练习笔记(二)

    HTML5&CSS3  练习CSS3伪选择器使用 1.first-line  格式:元素:first-line 说明:设置同一个标签下所有行内容的第一行的样式,例如: <table st ...

  3. C#动态生成html页

    Html生成模块:WriteHtml.cs using System.Collections.Generic; using System.IO; using System.Text; namespac ...

  4. Ubuntu/linux 有关权限修改的命令

    chmod更改文件权限命令 最常用的基础命令chmod chmod 777  目录名(路径名) 777 三位数字分别代表 user.group.others 的权限,可读(r).可写(w).可执行(x ...

  5. 自定义子tabBar

    基本设置 设置APPIcon(直接拖图片) 设置启动图片 将launch Screen File里的LaunchScreen.xib给删掉 点击launch image source框内的Use As ...

  6. 理解innodb buffer pool

    今天组里有个同事说可以查看innodb buffer pool每个表和索引占的大小,为此我搜了下,还真有方法,记录下. innodb buffer pool有几个目的: 缓存数据--众所周知,这个占了 ...

  7. java socket 多线程通讯 使用mina作为服务端

    客户端代码不变,参照 http://www.cnblogs.com/Westfalen/p/6251473.html 服务端代码如下: import java.io.IOException; impo ...

  8. 2 . Linux常见命令

    Linux常见命令格式: 命令名称 选项 参数 ls -alh 文件/目录 --all #ls 显示当前目录内容 #ls -l 显示文件详细信息 #ls -hl h已常见单位显示文件大小 k M G# ...

  9. 【转】工控老鬼】西门子S7200入门&精通【1】S7200硬件大全

    转载地址:http://blog.sina.com.cn/s/blog_669692a601016i5f.html     工控老鬼提醒以下的信息和资料可能不全或者不准确,如有疑问可以查阅西门子中国网 ...

  10. Java集合面试题

    1.Java集合框架是什么?说出一些集合框架的优点? 每种编程语言中都有集合,最初的Java版本包含几种集合类:Vector.Stack.HashTable和Array.随着集合的广泛使用,Java1 ...