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 - HTML的request类
Jan 09 Javascript
jquery 防止表单重复提交代码
Jan 21 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 Javascript
详解angular用$sce服务来过滤HTML标签
Apr 11 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
JavaScript 实现页面滚动动画
Apr 24 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
php生成zip文件类实例
2015/04/07 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
koa大型web项目中使用路由装饰器的方法示例
2019/04/02 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
Python获取当前脚本文件夹(Script)的绝对路径方法代码
2019/08/27 Python
Python的Lambda函数用法详解
2019/09/03 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
物流管理专业应届生求职信
2013/11/21 职场文书
导游实习生自荐书
2014/01/28 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
行政管理毕业生自荐信
2014/02/24 职场文书
应聘英语教师求职信
2014/04/24 职场文书
企业消防安全责任书
2014/07/23 职场文书
教代会开幕词
2015/01/28 职场文书
离婚案件原告代理词
2015/05/23 职场文书
飞屋环游记观后感
2015/06/08 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android
JavaScript前端面试组合函数
2022/06/21 Javascript