angular过滤器实现排序功能


Posted in Javascript onJune 27, 2017

本文实例为大家分享了angular过滤器排序的具体代码,供大家参考,具体内容如下

首先定义一个json文件:

 angular过滤器实现排序功能

然后写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

这样就完成了一个简单的排序,希望能帮到大家!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ext读取两种结构的xml的代码
Nov 05 Javascript
jQuery 扩展对input的一些操作方法
Oct 30 Javascript
javascript 闭包
Sep 15 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
禁用页面部分JavaScript不是全部而是部分
Sep 03 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
详解JavaScript中getFullYear()方法的使用
Jun 10 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 04 Javascript
详解AngularJS ng-class样式切换
Jun 27 #Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 #jQuery
JavaScript事件方法(实例讲解)
Jun 27 #Javascript
简单谈谈原生js的math对象
Jun 27 #Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 #Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 #Javascript
基于jQuery封装的分页组件
Jun 26 #jQuery
You might like
PHP读MYSQL中文乱码的解决方法
2006/12/17 PHP
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
PHP foreach遍历多维数组实现方式
2016/11/16 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
原生js实现给指定元素的后面追加内容
2013/04/10 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
javascript中clone对象详解
2014/12/03 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
ECMAScript6--解构
2017/03/30 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
javaScript实现游戏倒计时功能
2018/11/17 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
Java及python正则表达式详解
2017/12/27 Python
python 导入数据及作图的实现
2019/12/03 Python
python add_argument()用法解析
2020/01/29 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
python判断变量是否为列表的方法
2020/09/17 Python
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
领导班子整改方案
2014/10/25 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers
Go语言 详解net的tcp服务
2022/04/14 Golang