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拖拽 &amp; 弹出层 介绍与示例
Dec 27 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
Jul 21 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
es6基础学习之解构赋值
Dec 10 Javascript
Node.js文本文件BOM头的去除方法
Nov 22 Javascript
vue-cli4.5.x快速搭建项目
May 30 Vue.js
详解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中删除、清空session的方式总结
2015/10/09 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
PHP实现的日历功能示例
2018/09/01 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
Python中的列表知识点汇总
2015/04/14 Python
部署Python的框架下的web app的详细教程
2015/04/30 Python
python根据日期返回星期几的方法
2015/07/06 Python
Python实现获取命令行输出结果的方法
2017/06/10 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
python 实现敏感词过滤的方法
2019/01/21 Python
pandas 层次化索引的实现方法
2019/07/06 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
会计求职信
2014/05/29 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
老干部工作先进事迹
2014/08/17 职场文书
长城导游词300字
2015/01/30 职场文书
父亲去世追悼词
2015/06/23 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
js 数组 fill() 填充方法
2021/11/02 Javascript
python playwright 自动等待和断言详解
2021/11/27 Python