angularJS1笔记-(5)-过滤器练习

时间：2022-12-26 16:10:41

html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="../../vendor/bootstrap3/css/bootstrap.css"/>

    <link rel="stylesheet" href="../../vendor/bootstrap3/css/bootstrap-theme.css">

    <style>

        .orderColor{

            color: red;

        }

    </style>

</head>

<body>

<div ng-app="product">

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

        <nav class="navbar navbar-default" role="navigation">

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <form class="navbar-form navbar-left" role="search">

                    <div class="form-group">

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

                    </div>

                </form>

            </div>

        </nav>

        <table class="table">

            <thead>

            <tr >

                <th ng-click="changeOrder('id')" ng-class="{dropup:order === ''}">

                    id

                    <span ng-class="{orderColor:orderType==='id'}" class="caret"></span>

                </th>

                <th ng-click="changeOrder('name')" ng-class="{dropup:order === ''}">

                    name

                    <span ng-class="{orderColor:orderType==='name'}" class="caret"></span>

                </th>

                <th ng-click="changeOrder('price')" ng-class="{dropup:order === ''}">

                    price

                    <span ng-class="{orderColor:orderType==='price'}" class="caret"></span>

                </th>

            </tr>

            </thead>

            <tbody>

            <!--filter:ng-model名-->

            <tr ng-repeat="product in productData | filter:search | orderBy:order + orderType">

                <td>

                    {{product.id}}

                </td>

                <td>

                    {{product.name}}

                </td>

                <td>

                    {{product.price | currency:"￥"}}

                </td>

            </tr>

            </tbody>

        </table>

    </div>

</div>

<script type="text/javascript" src="../../vendor/angular/angularJs.js"></script>

<script type="text/javascript" src="app/index.js"></script>

</body>

</html>

js:

angular.module('product', [])

    .service('productData', function () {

        return [

            {

                id: 3333,

                name: "iphone",

                price: 5500

            },

            {

                id: 3334,

                name: "ipad4",

                price: 3300

            },

            {

                id: 3400,

                name: "iwatch",

                price: 2400

            }

        ]

    })

    .controller('productController', function ($scope, productData) {

        $scope.productData = productData;

        $scope.orderType = "id";

        $scope.order = '-';

        $scope.changeOrder = function (type) {

            $scope.orderType = type;

            if($scope.order === ''){

                $scope.order = '-';

            }else{

                $scope.order = '';

            }

        }

    })

运行结果：

angularJS1笔记-(5)-过滤器练习

angularJS1笔记-(5)-过滤器练习

　　

angularJS1笔记-(5)-过滤器练习的更多相关文章

  1. angularJS1笔记-&lpar;6&rpar;-自定义过滤器

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  2. &lbrack;Java&rsqb; JSP笔记 - Filter 过滤器

    一.什么是Web过滤器 Servlet API 很久以前就已成为企业应用开发的基石,而 Servlet 过滤器则是对 J2EE 家族的相对较新的补充. Servlet 过滤器是可插入的 Web 组件, ...

  3. 学习笔记&lowbar;过滤器应用&lowbar;1（分ip统计网站的访问次数）

    分ip统计网站的访问次数 ip count 192.168.1.111 2 192.168.1.112 59 统计工作需要在所有资源之前都执行,那么就可以放到Filter中了. 我们这个过滤器不打算做 ...

  4. Java&lowbar;Web学习笔记&lowbar;过滤器应用案例（解决全站字符乱码）

    解决全站字符乱码(POST和GET中文编码问题) servlet: l  POST:request.setCharacterEncoding(“utf-8”); l  GET: String user ...

  5. 学习笔记&lowbar;过滤器详细&lowbar;2（过滤器JavaWeb三大组件之一）

    过滤器详细 5 四种拦截方式 我们来做个测试,写一个过滤器,指定过滤的资源为b.jsp,然后我们在浏览器中直接访问b.jsp,你会发现过滤器执行了! 但是,当我们在a.jsp中request.getR ...

  6. 学习笔记&lowbar;过滤器详细（过滤器JavaWeb三大组件之一）

    过滤器详细 1 过滤器的生命周期 我们已经学习过Servlet的生命周期,那么Filter的生命周期也就没有什么难度了! (l)  init(FilterConfig):在服务器启动时会创建Filte ...

  7. 学习笔记&lowbar;过滤器概述（过滤器JavaWeb三大组件之一）

    过滤器Filter Filter和Lister是Servlet规范里的两个高级特性.不同于Servlet,它们不用于处理客户端请求,只用于对request.response进行修改或者对context ...

  8. JavaWeb学习笔记九 过滤器、注解

    过滤器Filter filter是对客户端访问资源的过滤,符合条件放行,不符合条件不放行,并且可以对目标资源访问前后进行逻辑处理. 步骤: 编写一个过滤器的类实现Filter接口 实现接口中尚未实现的 ...

  9. HBase笔记6 过滤器

    过滤器 过滤器是GET或者SCAN时过滤结果用的,相当于SQL的where语句 HBase中的过滤器创建后会被序列化,然后分发到各个region server中,region server会还原过滤器 ...

随机推荐

  1. 实现一个做双向NAT的虚拟网卡

    问题描写叙述与解决方式 还是老问题.Linux系统中通过iptables配置的NAT无法在双向通信环境中使用,你无法配置一条NAT规则实现对两个方向主动发起的流量做NAT,解决问题的方案有好几种: 1 ...

  2. php程序员的弱点

    今天在在知乎上看到一个问题,题目是<看了laravel的php框架怎么感觉很不靠谱?>,我最近也在想学习一下laravel,laravel听说是受到很大ruby on rails的影响. ...

  3. Java多线程其他

    1.interrupt()方法 interrupt方法不会真正中断线程,它只会清楚线程的wait,sleep,join的受阻状态,时线程重新获得CPU的执行权. 此时如果再次调用线程的wait,sle ...

  4. ASP&period;NET Core Web API下事件驱动型架构的实现（一）：一个简单的实现

    很长一段时间以来,我都在思考如何在ASP.NET Core的框架下,实现一套完整的事件驱动型架构.这个问题看上去有点大,其实主要目标是为了实现一个基于ASP.NET Core的微服务,它能够非常简单地 ...

  5. 小白的Python之路 day2 文件操作

    文件操作 对文件操作流程 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 现有文件如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1 ...

  6. WelcomeActivity【欢迎界面】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 简单记录下欢迎界面的布局以及倒计时和跳过功能. 效果图 代码分析 1.修改APP整个主题为无标题栏样式:styles.xml文件 & ...

  7. vue使用技巧（分页、nextTick、复制对象）

    分页技巧 v1.0+ 版本的时候使用过滤器 limitBy 实现 v2.0+ 版本的时候使用compute使用 slice 方法实现 data:{ pageNum:10 }, computed:{ n ...

  8. 使用FileReader接口读取文件内容

    如果想要读取或浏览文件,则需要通过FileReader接口,该接口不仅可以读取图片文件,还可以读取文本或二进制文件,同时,根据该接口提供的事件与方法,可以动态侦察文件读取时的详细状态,接下来,我们详细 ...

  9. SSH使用小记

    0.是什么 SSH(Secure Shell)是一种加密的网络传输协议,可在不安全的网络中为网络服务提供安全的传输环境.(更多详情可参阅* https://zh.wikipedia.org/wi ...

  10. Maths &vert; 相关接收机与最大似然准则

    目录 一. 接收机的概念 1.信号解调器 2.检测器 二. 相关解调器的解调过程及其原理 1.构造相关解调器 2.得到接收信号在基向量上的投影 3.相关器输出的性质 三.检测器的实现及其数学原理 1. ...

相关文章