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 相关文章推荐
javascript创建数组之联合数组的使用方法示例
Dec 26 Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 Javascript
Js冒泡事件详解及阻止示例
Mar 21 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
Sep 27 Javascript
利用vscode编写vue的简单配置详解
Jun 17 Javascript
webpack4 SCSS提取和懒加载的示例
Sep 03 Javascript
基于Vue SEO的四种方案(小结)
Jul 01 Javascript
layui动态渲染生成select的option值方法
Sep 23 Javascript
jQuery treeview树形结构应用
Mar 24 jQuery
详解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加速 eAccelerator配置和使用指南
2009/06/05 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
利用php+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
PHP JS Ip地址及域名格式检测代码
2013/09/27 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
js键盘事件的keyCode
2014/07/29 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
Python 装饰器深入理解
2017/03/16 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
个人自我鉴定怎么写
2013/10/28 职场文书
外贸英语专业求职信范文
2013/12/25 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
安全生产警示教育活动总结
2015/05/09 职场文书
捐书仪式主持词
2015/07/04 职场文书
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL
MySQL数据库 安全管理
2022/05/06 MySQL
JavaScript中10个Reduce常用场景技巧
2022/06/21 Javascript