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的Function详细
Nov 14 Javascript
优化网页之快速的呈现我们的网页
Jun 29 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
jQuery导航条固定定位效果实例代码
May 26 jQuery
ligerUI---ListBox(列表框可移动的实例)
Nov 28 Javascript
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
Vue Router去掉url中默认的锚点#
Aug 01 Javascript
通过js给网页加上水印背景实例
Jun 17 Javascript
js实现简单贪吃蛇游戏
May 15 Javascript
AutoJs实现刷宝短视频的思路详解
May 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
PHP中一个控制字符串输出的函数
2006/10/09 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
一个超级简单的python web程序
2014/09/11 Python
详解Django中的过滤器
2015/07/16 Python
python使用Matplotlib画条形图
2020/03/25 Python
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
Python中print和return的作用及区别解析
2019/05/05 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
python关于变量名的基础知识点
2020/03/03 Python
python如何实现DES加密
2020/09/21 Python
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
新闻学毕业生自荐信
2013/11/15 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
业务内勤岗位职责
2015/04/13 职场文书
特此通知格式
2015/04/27 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书
创业计划书之家政服务
2019/09/18 职场文书
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL
mysql函数全面总结
2021/11/11 MySQL
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript