如何angular过滤器进行排序???
首先定义一个json文件:
然后写HTML文件:
- <div id="box">
- <!--第一个下拉框-->
- <select ng-model="a">
- <option value="age">按照年龄排序</option>
- <option value="code">按照编码排序</option>
- <option value="name">按照姓名排序</option>
- </select>
- <!--升序还是降序-->
- <select ng-model="b">
- <option value="">升序</option>
- <option value="-">降序</option>
- </select>
- <!--一个搜索框-->
- <input type="text" placeholder="请输入要搜索的内容" ng-model="c"/>
- </div>
- <!--渲染的数据-->
- <div id="wrap">
- <table>
- <tr>
- <th>编码</th>
- <th>姓名</th>
- <th>年龄</th>
- </tr>
- <tr ng-repeat="item in data|filter:c|orderBy:b+a">
- <td>{{item.code}}</td>
- <td>{{item.name}}</td>
- <td>{{item.age}}</td>
- </tr>
- </table>
- </div>
angular:
- <script>
- var app = angular.module("mk",[]);
- app.controller("test",function($scope,$http){
- $http.get('json/index.json').success(function(data){
- $scope.data = eval(data);
- $scope.a = "code";
- })
- })
- </script>
在这种运用到的过滤器有filter 、orderBy
这样就完成了一个简单的排序,希望能帮到大家!!!!!!!!
如何angular过滤器进行排序???的更多相关文章
- Angular过滤器
angular中的过滤器有: currency 过滤货币 number 过滤数字, date 过滤日期 json 把js对象过滤为json字符串 limitTo 截取字符串,参数是正数则从左往右 ...
- Angular过滤器 自定义及使用方法
首先设置自定义过滤器. 定义模块名:angular .module('myApp') .filter('filterName',function(){ return function(要过滤的对象,参 ...
- angular过滤器基本用法
1.过滤器主要用于数据的筛选,可以直接在模板使用 语法: {{expression | filter}} {{expression | filter | filter2}} {{expression ...
- Angular 过滤器的简单使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 简话Angular 04 Angular过滤器详解
一句话: filter是万能的数据处理器,可以过滤数据,排序数据,删除数据,扩展数据 1. 内置filter大全 url: https://docs.angularjs.org/api/ng/filt ...
- angular过滤器使用 自定义过滤器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
- angular入门--列表排序
首先,先上代码 <html ng-app="app1"> <head> <meta charset='utf-8' /> <meta na ...
- angular 过滤器(日期转换,时间转换,数据转换等)
(function() { 'use strict'; /** * myApp Module * * Description */ angular.module('myApp') .filter('i ...
- Angular 过滤器
<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...
随机推荐
- Qt C++ libcaffe.so无法调用
在用QT编写调用caffe的工程时,发现一直有个错误: error while loading shared libraries libcaffe.so.1.0.0-rc3: cannot open ...
- 老男孩python作业5-开发一个简单的python计算器
开发一个简单的python计算器 实现加减乘除及拓号优先级解析 用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568 ...
- css3 超出文本...显示
width: 250px 或者 100%; max-width: 285px; overflow: hidden; display: inline-block; white-space: nowrap ...
- python 的内置模块 re
在 pattern 的 “” 前面需要加上一个 r 用来表示这是正则表达式, 而不是普通字符串 >>> import re >>> ptn = r"r[a ...
- QDU_组队训练(ABEFGHKL)
A - Accurately Say "CocaCola"! In a party held by CocaCola company, several students stand ...
- 2018acm-icpc青岛站心得
今年总共两场区域赛,一场南京,一场青岛.南京场队伍真正开始磨合,虽然最后还是铜牌,但是和银牌队伍其实只差一个计算几何的板子的问题.而鉴于南京的教训,所以在准备青岛站的时候,我准备了非常多的模板,还和派 ...
- QQ链接病毒分析
QQ链接病毒分析 特征 点击病毒链接后,自动会在每一时刻范围内通过所有途径群发新的病毒链接(途径包括Qzone,群聊等) 分析 首先看一下病毒链接的一个样例 http://news.soso.com/ ...
- npm install时 报错Maximum call stack size exceeded
给npm降级或者升级 降级 : npm install -g npm@5.4.0 升级 : npm install -g npm 升级到最新版
- python操作Spark常用命令
1. 获取SparkSession spark = SparkSession.builder.config(conf = SparkConf()).getOrCreate() 2. 获取SparkCo ...
- [转] Spring Boot中Web应用的统一异常处理
[From] http://blog.didispace.com/springbootexception/ 我们在做Web应用的时候,请求处理过程中发生错误是非常常见的情况.Spring Boot提供 ...