angularjs过滤器--filter与ng-repeat配合有奇效

index.html

<!DOCTYPE html>
<html>
<head>
 <link href="bootstrap.min.css" rel="external nofollow" rel="stylesheet">
</head> 

<body ng-app="myApp" ng-controller="myCtrl">
 <input type="text" placeholder="请输入学校ID 或 名称" ng-model="query">
<table class="table-bordered">
 <tr ng-repeat="school in schoolList | <strong>filter:query</strong>" >
  <td class="col-md-2">{{ school.schoolId}}</td>
  <td class="col-md-2">{{ school.schoolName}}</td>
 </tr>
 <script src="bootstrap.min.js"></script>
 <script src="angular.min.js"></script>
 <script src="script.js"></script>
</table>
</body>
</html>

script.js

angular.module('myApp', [])
 .controller('myCtrl', function ($scope) {
  $scope.schoolList = [
   {
    schoolId: 01,
    schoolName: '中山大学',
   },
   {
    schoolId: 02,
    schoolName: '厦门大学',
   },
   {
    schoolId: 03,
    schoolName: '北京大学',
   },
   {
    schoolId: 04,
    schoolName: '复旦大学',
   }
  ];
 });

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • Javascript中关于Array.filter()的妙用详解

    前言 和map类似,Array的filter也接收一个函数.但是和map不同的是, filter把传入的函数依次作用于每个元素,然后根据返回值是 true 还是false决定保留还是丢弃该元素. 实例介绍 例如,在一个Array中,删掉偶数,只保留奇数,可以这么写: var arr = [1, 2, 4, 5, 6, 9, 10, 15]; var r = arr.filter(function (x) { return x % 2 !== 0; }); r; // [1, 5, 9, 15]

  • 详解AngularJS中$filter过滤器使用(自定义过滤器)

    1.内置过滤器 * $filter 过滤器,是angularJs中用来处理数据以更好的方式展示给我用户.比如格式化日期,转换大小写等等. * 过滤器即有内置过滤器也支持自定义过滤器.内置过滤器很多,可以百度.关键是如何使用: * 1.在HTML中直接使用内置过滤器 * 2.在js代码中使用内置过滤器 * 3.自定义过滤器 * * (1)常用内置过滤器 * number 数字过滤器,可以设置保留数字小数点后几位等 * date 时间格式化过滤器,可自己设置时间格式 * filter 过滤的数据一般

  • 实例解析angularjs的filter过滤器

    现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤类常用的filter后面上例子. lowercase(小写) {{ lastName | lowercase }} uppercase(大写) {{ lastName | uppercase }} number(格式化数字) number过滤器可以为一个数字加上千位分割,像这样,123,456,78

  • JavaScript之filter_动力节点Java学院整理

    filter也是一个常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素. 和map()类似,Array的filter()也接收一个函数.和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素. 例如,在一个Array中,删掉偶数,只保留奇数,可以这么写: var arr = [1, 2, 4, 5, 6, 9, 10, 15]; var r = arr.filter(function (x) { retu

  • vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据

    vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据

    直接贴代码了: 先上输入前的样子: <style> #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block;margin:0 auto 10px;height:24px;line-height: 24px;width:200px;} .content ul li{text-align: center;} .content ul li span{display: inline-

  • AngularJS过滤器filter用法总结

    本文实例总结了AngularJS过滤器filter用法.分享给大家供大家参考,具体如下: 引言 filter过滤器对于我们来说并不陌生,他和我们现实生活中的过滤器的意思差不多,它的作用就是接收一个输入的值,然后按照某个规则进行处理然后输出最后的结果,例如我们输入一个数字,然后我们需要得到货币形式的数据,这样我们就可以利用过滤器来实现,AngularJS中的过滤器是非常简单的,分为内置和自定义两种,下面小编就简单的给大家介绍一些. 内置过滤器 ng内置了一些过滤器,它们是:currency(货币)

  • Angularjs之filter过滤器(推荐)

    现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤类常用的filter后面上例子. lowercase(小写) {{ lastName | lowercase }} uppercase(大写) {{ lastName | uppercase }} number(格式化数字) number过滤器可以为一个数字加上千位分割,像这样,123,456,78

  • AngularJS过滤器filter用法分析

    AngularJS过滤器filter用法分析

    本文实例讲述了AngularJS过滤器filter用法.分享给大家供大家参考,具体如下: 在开发中,经常会遇到这样的场景 如用户的性别分为"男"和"女",在数据库中保存的值为1和0,用户在查看自己的性别时后端返回的值自然是1或0,前端要转换为"男"或"女"再显示出来: 如我要换个羽毛球拍,某猫上羽毛球拍的品牌多达数十种,我想单独查看YONEX这个品牌的羽毛球拍: 买完羽毛球拍我还想买一桶羽毛球,点击按销量排序展示商品: 以上三

  • AngularJS过滤器filter用法实例分析

    本文实例讲述了AngularJS过滤器filter用法.分享给大家供大家参考,具体如下: 这节我们来看看angularjs的过滤器filter. 在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化,才能显示给用户.比如时间本地化,或者yyyy-MM-dd HH:mm:ss格式,数字精度格式化,本地化,人名格式化等等.在angularjs中为我们提供了叫filter的指令,让我们能够很轻易就能做到着一些列的功能,angularjs内部为我们提供了number等很多内置的filter.并且

  • angularjs过滤器--filter与ng-repeat配合有奇效

    index.html <!DOCTYPE html> <html> <head> <link href="bootstrap.min.css" rel="external nofollow" rel="stylesheet"> </head> <body ng-app="myApp" ng-controller="myCtrl"> &l

  • AngularJS变量及过滤器Filter用法分析

    本文实例讲述了AngularJS变量及过滤器Filter用法.分享给大家供大家参考,具体如下: 1. 关于部分变量的操作 设置变量: ng-init="hour=14" //设置hour变量在DOM中 使用data-ng-init 更好些 $scope.hour = 14; //设置hour变量在js中 使用变量: (1) 如果是在DOM 相关的 ng-*** 属性里 直接写变量名 如: <p ng-show="hour > 13">I am vi

  • 详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例

    Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比如格式化时间/日期的VIEW视图代码: <div ng-app> <p> <label>Select a date</label> <input type="date" id="date" ng-model=&quo

  • AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例

    AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例

    本文实例讲述了AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net ng-repeat去除重复</title> <script src="http://apps.bdimg.com/libs/a

随机推荐