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: '复旦大学',
   }
  ];
 }); 

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

时间: 2017-04-18

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实现搜索筛选、降序排序数据

直接贴代码了: 先上输入前的样子: <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

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验证、过滤器、指令

一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-model="" [name=""] [required=""] [ng-required=""] [ng-minlength=""] [ng-maxlength=""][ng-pattern

详解angularjs获取元素以及angular.element()用法

本文介绍了详解angularjs获取元素以及angular.element()用法 ,分享给大家,具体如下: addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容 attr() - 获取匹配的元素集合中的第一个元素的属性的值 bind() - 为一个元素绑定一个事件处理程序 children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选

详解AngularJS中的表单验证(推荐)

AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则式,很方便的完成验证,理论上所有的验证都可以用正则式完成 //javascript $scope.mobileRegx = "^1(3[0-9]|4[57]|5[0-35-9]|7[01678]|8[0-9])\\d{8}$"; $scope.emailRegx = "^[a-z]([a-z0-9]*[-_]?

详解AngularJS ng-class样式切换

整理文档,搜刮出一个详解AngularJS ng-class样式切换,稍微整理精简一下做下分享. 1.HTML <ion-view> <ion-content> <div class="button-bar"> <div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[isFirst]" ng-click="isFirst = !isFirst"&g

详解 Android中Libgdx使用ShapeRenderer自定义Actor解决无法接收到Touch事件的问题

详解 Android中Libgdx使用ShapeRenderer自定义Actor解决无法接收到Touch事件的问题 今天在项目中实现了一个效果,主要是画一个圆.为了后续使用方便,将这个圆封装在一个自定义Actor(CircleActot)中,后续想显示一个圆的时候,只要创建一个CircleActor中即可. 部分代码如下所示: package com.ef.smallstar.unitmap.widget; import android.content.res.Resources; import

详解angularjs实现echart图表效果最简洁教程

本文介绍了详解angularjs实现echart图表效果最简洁教程,分享给大家,具体如下: ehcart是百度做的数据图表,基于原生js.接口和配置都写的很好很易读,还可以用于商用. 一 echart包引用 下载解压,放入lib中. 下载地址:echart_jb51.rar 并在index.html中引用如图两个js文件. app.js中引用angular-echarts 二 页面 html页面 <!--饼图--> <div> <donut-chart config=&quo

Vue.js每天必学之过滤器与自定义过滤器

基础 类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数.过滤器函数以值为参数,返回转换后的值: Vue.filter('reverse', function (value) { return value.split('').reverse().join('') }) <!-- 'abc' => 'cba' --> <span v-text="message | reverse">&

详解AngularJS中自定义过滤器

过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它们是:currency(货币).date(日期).filter(子串匹配).json(格式化json对象).limitTo(限制个数).lowercase(小写).uppercase(大写).number(数字).orderBy(排序).总共九种.除此之外还可以自定义过滤器,这个就强大了,可以满足任何

详解Angularjs filter过滤器

系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这篇简单说一下angularjs的filter功能,angularjs的filter功能可分为二种,一种是内置的过滤器,一种是自定义的. Filter是用来格式化数据用的. Filter的基本原型( '' 类似于Linux中的管道模式): {{ expression filter }} Filter可