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 相关文章推荐
JQuery index()方法使用代码
Jun 02 Javascript
QUnit jQuery的TDD框架
Nov 04 Javascript
网易JS面试题与Javascript词法作用域说明
Nov 09 Javascript
禁用页面部分JavaScript方法的具体实现
Jul 31 Javascript
JS Loading功能的简单实现
Nov 29 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
JavaScript实现无穷滚动加载数据
May 06 Javascript
JS数组方法slice()用法实例分析
Jan 18 Javascript
JS实现简单贪吃蛇小游戏
Oct 28 Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 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
如何设置mysql允许外网访问
2013/06/04 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
js 目录列举函数
2008/11/06 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
Python写的英文字符大小写转换代码示例
2015/03/06 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
python 调用有道api接口的方法
2019/01/03 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
Python 定义只读属性的实现方式
2020/03/05 Python
Python如何根据时间序列数据作图
2020/05/12 Python
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
怎么写好自荐信
2013/10/30 职场文书
诚信考试承诺书
2014/03/27 职场文书
商业项目策划方案
2014/06/05 职场文书
地理信息科学专业推荐信
2014/09/08 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
党员检讨书
2014/10/13 职场文书
小鞋子观后感
2015/06/05 职场文书
院系推荐意见
2015/06/05 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
JavaScript的Set数据结构详解
2022/02/18 Javascript
vue+iview实现手机号分段输入框
2022/03/25 Vue.js