Skip to main content

moregeek program

AngularJS实现产品列表(页面搜索,排序)-多极客编程

标签属性介绍

ng-class="{className:expression}" 如果expression为true,则使用className这个class。

ng-click="functionName(pram)" 这跟onclick是一样的,点击就执行functionName(pram)。

ng-repeat="i in set | filter:filterExpression or filterFunction| orderBy:order+orderType" 循环set里的元素,有过滤条件和排序条件。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
    body {
        font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
    }
    
    .orderColor {
        color: red;
    }
    </style>
</head>

<body ng-app="product">
    <div class="container" ng-controller="firstController">
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <!-- Collect the nav links, forms, and other content for toggling -->
                <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" class="form-control" placeholder="查找内容" ng-model="search">
                        </div>
                    </form>
                </div>
            </div>
        </nav>
        <table class="table">
            <thead>
                <tr>
                    <th ng-class="{dropup:order===''}" ng-click="changeOrder('id')">产品名称<span class="caret" ng-class="{orderColor:orderType==='id'}"></span></th>
                    <th ng-class="{dropup:order===''}" ng-click="changeOrder('name')">产品编号<span class="caret" ng-class="{orderColor:orderType==='name'}"></span></th>
                    <th ng-class="{dropup:order===''}" ng-click="changeOrder('price')">产品价格<span class="caret" ng-class="{orderColor:orderType==='price'}"></span></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in productData | filter:search | orderBy:order+orderType">
                    <td>`item`.`id`</td>
                    <td>`item`.`name`</td>
                    <td>{{item.price | currency:'RMB '}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js"></script>
    <script type="text/javascript">
    angular.module('product', [])
        .service('productData', function() {
            return [{
                id: 1098,
                name: 'iPhone',
                price: 5288
            }, {
                id: 5420,
                name: 'iPad',
                price: 4388
            }, {
                id: 2067,
                name: 'Mac Book',
                price: 10888
            }, {
                id: 5991,
                name: 'Surface',
                price: 9288
            }];
        })
        .controller('firstController', 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 = '';
                }
            }
        });
    </script>
</body>

</html>


©著作权归作者所有:来自51CTO博客作者iampomelo的原创作品,如需转载,请注明出处,否则将追究法律责任
AngularJS实现产品列表(页面搜索,排序)
https://blog.51cto.com/iampomelo/1668963

linux 开启慢查询,分析查询语句-多极客编程

linux下开启mysql慢查询,分析查询语句张映 发表于 2010-08-14分类目录: mysql标签:mysql, mysqld, mysqldumpslow, slow query, 慢查询一,为什么要开启这个查询呢?数据库是很容易产生瓶颈的地方,现在Nosql大家讨论这么热,估计都被数据库搞郁闷了。mysql中最影响速度的就是那些查询非常慢的语句,这些慢的语句,可能是写的不够合理或者是大

html5学习笔记(3)-多极客编程

html表单的创建表单:表单用于获取不同类型的用户输入常用标签:http://www.w3school.com.cn/tags/html_ref_byfunc.asp <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></tit

easyui datagrid中如何展示图片-多极客编程

 1 .Demo   只写了关键的代码,其他的属性自行添加。   首先引入easyui的js必要文件,然后Demo如下      HTML部分:   <div id='box'><div>   js部分:   $('#box').datagrid({    columns:[[       {           field: 'imgurl',            ti

sublime快捷键-多极客编程

Sublime Text 3 快捷键精华版Ctrl+Shift+P:打开命令面板Ctrl+P:搜索项目中的文件Ctrl+G:跳转到第几行Ctrl+W:关闭当前打开文件Ctrl+Shift+W:关闭所有打开文件Ctrl+Shift+V:粘贴并格式化Ctrl+D:选择单词,重复可增加选择下一个相同的单词Ctrl+L:选择行,重复可依次增加选择下一行Ctrl+Shift+L:选择多行Ctrl+Shift

tomcat配置默认访问工程目录-多极客编程

 在实际的开发测试中,访问路径加工程名不免有点麻烦,例如有web工程名为:sunmojd,那么在tomcat的server.xml中的配置如下:找到标签:<Host name="localhost"  appBase="webapps"  unpackWARs="true" autoDeploy="true"        xmlValidation="false" xmlNamespace

TCP/IP基础-多极客编程

 一、TCP/IP基础 数据自身的标识: 规定了数据包的格式等设备间之上的协议:   以太网的封装等信号处理、传输 1.1数据自身的标示: 1.2设备之上的协议和数据    CSMA/CD   CSMA/CA    Ethernet   PPP  HDLC  Frame-relay    ARP        ARP代理   IP    ICMP      ICMP重定向     (ping   

稳定模式在RESTful架构中的应用-多极客编程

分布式系统中保持网络稳定的五种方式 1.重试模式 2.超时模式 3.断路器模式 4.握手模式 5.隔离壁模式 倘若分布式系统的可靠性由一个极弱的控件决定,那么一个很小的内部功能都可能导致整个系统不稳定。了解稳定模式如何预知分布式网络热点,进而了解应用于Jersey和RESTEasy RESTFUL事务中的五种模式。 要实现高可用、高可靠分布式系统,需要预测一些可不预测的状况。假设你运行规模更大的软

关于Weblogic线程数的几点使用-多极客编程

一、背景 最近负责做一个平台的poc测试,性能测试要求测试1000并发下平台的表现,web服务器采用的是weblogic,版本是11g,10.3.6,所有操作都是基于这个版本(因为以前修改线程数的操作有些基于这个版本不能生效)。在LoadRunner压1000并发下,发现应用表现并不好,响应时间明显增加。二、分析 监控服务器资源,发现集群平台服务器负载并不高,而web应用服务器负载同样也不高,服务

大话“自动化测试框架思想与构建”-多极客编程

序言:也许到现在大家对所谓的“自动化测试框架”仍然觉得是一种神秘的东西,仍然觉得其与各位很远;其实不然,“自动化测试框架”从理念来说,并不复杂,但其之所以神秘,是因为其运用起来很是复杂,每个公司,每个部门其产品线,其运作流程都是不同的,所以就导致了在想运用“自动化测试框架”去完成自动化测试时产生了很多不定因素,导致了很多自动化测试项目的失败,让人对“自动化测试框架”开始敬而远之。而自动化测试发展也

敏捷开发概念-多极客编程

 什么是敏捷开发?敏捷开发(Agile Development)是一种以人为核心、迭代、循序渐进的开发方法。怎么理解呢?首先,我们要理解它不是一门技术,它是一种开发方法,也就是一种软件开发的流程,它会指导我们用规定的环节去一步一步完成项目的开发;而这种开发方式的主要驱动核心是人;它采用的是迭代式开发;为什么说是以人为核心?我们大部分人都学过瀑布开发模型,它是以文档为驱动的,为什么呢?因为在瀑布的整

esxtop命令磁盘监控工具详解-多极客编程

什么是IOPS用于测量磁盘每秒可以完成的IO读写 命令数量(读写次数),是衡量磁盘 性能的主要指标之一,随机读写频繁的 应用,如OLTP(Online Transaction Processing),IOPS是关键衡量指标。单盘简明计算公式  (具体磁盘参看厂家产品说明书)IOPS = 1000ms/(寻道时间ms+旋转延迟时间ms)IOPS=1000/(3+60*1000/7200/2)=140

什么是Docker? 为什么要用Docker?-多极客编程

一、什么是Dokcer?     Docker是一个开源项目, 诞生于2013年初, 最初是dotCloud公司内部的一个业余项目。 它基于Google公司推出的Go语言实现。 项目后来加入了Linux基金会, 遵从了Apache 2.0协议, 项目代码在GitHub上进行维护。     Docker自开源后受到广泛的关注和讨论, 以至于dotCloud公司后来都改名为Docker lnc。Red