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 相关文章推荐
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 Javascript
JavaScript获取XML数据附示例截图
Mar 05 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
JS实现文件动态顺序载入的方法
Mar 07 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 Javascript
小程序实现多个选项卡切换
Jun 19 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数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
js实现常用排序算法
2016/08/09 Javascript
JavaScript每天必学之基础知识
2016/09/17 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
2016/10/19 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
JS开发自己的类库实例分析
2019/08/28 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
党委领导班子整改方案
2014/09/30 职场文书
党员公开承诺书2015
2015/01/21 职场文书
检讨书范文1000字
2015/01/28 职场文书
预备党员群众意见
2015/06/01 职场文书
python munch库的使用解析
2021/05/25 Python
python迷宫问题深度优先遍历实例
2021/06/20 Python
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸