Angularjs过滤器实现动态搜索与排序功能示例


Posted in Javascript onDecember 13, 2017

本文实例讲述了Angularjs过滤器实现动态搜索与排序功能。分享给大家供大家参考,具体如下:

利用angularjs实现动态的插入以及利用过滤器进行数据的搜索以及排序.

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>3water.com AngularJS过滤器测试</title>
</head>
<body ng-controller="app">
  <table>
    <tr>
      <td ng-click="sort('name')">姓名</td>
      <td ng-click="sort('age')">年龄</td>
    </tr>
    <tr ng-repeat="arr1 in arr1">
      <td>{{arr1.name}}</td>
      <td>{{arr1.age}}</td>
    </tr>
  </table>
  <input id="wei" type="text" ng-focus="concentrate()" >
  <input type="button" ng-click="search()" value="搜索">
</body>
<script src="angular.min.js"></script>
<script src="jquery.js"></script>
  <script>
    // var wei = document.getElementById("wei");
    // console.log(wei);
    // setTimeout(function(){
    // $("#wei").attr("disabled",false);
    // },3000);
    var m=angular.module("myApp",[]);
    m.controller("app",["$scope","$filter",function($scope,$filter){
      var arr=[
        {"name":"猪","age":20},
        {"name":"小猪","age":23},
        {"name":"大猫","age":227},
        {"name":"老虎","age":29},
        {"name":"中虎","age":29},
        {"name":"老虎","age":39},
        {"name":"老猫","age":47},
        {"name":"熊猫","age":29},
        {"name":"树懒","age":27},
        {"name":"狮子","age":59}
      ];
       $scope.arr1=arr;
       //实现查询功能
      var isopen=true;
      $scope.sort=function(str){
        $scope.arr1=$filter("orderBy")($scope.arr1,str,isopen);
        isopen=!isopen;
        //console.log(isopen);
      };
      $scope.concentrate=function(){
        console.log("已聚焦");
      }
      //实现查询功能
      $scope.search=function(){
        console.log(11);
        $scope.arr1=$filter("filter")(arr,document.getElementById("wei").value);
      }
    }]);
  </script>
</html>

运行效果:

Angularjs过滤器实现动态搜索与排序功能示例

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
JavaScript delete操作符应用实例
Jan 13 Javascript
JavaScript 创建对象
Jul 17 Javascript
js注意img图片的onerror事件的分析
Jan 01 Javascript
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
React 子组件向父组件传值的方法
Jul 24 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
解决vue自定义全局消息框组件问题
Nov 22 Javascript
Angular4编程之表单响应功能示例
Dec 13 #Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 #Javascript
vue登录路由验证的实现
Dec 13 #Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 #Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 #Javascript
vue组件中使用iframe元素的示例代码
Dec 13 #Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 #Javascript
You might like
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
如何用angularjs制作一个完整的表格
2016/01/21 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
2016/12/20 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
2017/03/02 Javascript
javascript 中的try catch应用总结
2017/04/01 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
Python中删除文件的程序代码
2011/03/13 Python
python实现的希尔排序算法实例
2015/07/01 Python
python导入pandas具体步骤方法
2019/06/23 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
python各层级目录下import方法代码实例
2020/01/20 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
xml有哪些解析技术?区别是什么
2016/04/26 面试题
人民调解员先进事迹材料
2014/05/08 职场文书
爱护花草树木的标语
2014/06/11 职场文书
爬山的活动方案
2014/08/16 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS
oracle通过存储过程上传list保存功能
2021/05/12 Oracle