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


Posted in Javascript onApril 20, 2017

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

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

Javascript 相关文章推荐
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
JS实现定时自动关闭DIV层提示框的方法
May 11 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
微信小程序登录session的使用
Mar 17 Javascript
js事件触发操作实例分析
Jun 21 Javascript
不刷新网页就能链接新的js文件方法总结
Mar 01 Javascript
vue 解决provide和inject响应的问题
Nov 12 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 #Javascript
bootstrap常用组件之头部导航实现代码
Apr 20 #Javascript
基于JavaScript实现活动倒计时效果
Apr 20 #Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 #Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 #jQuery
通过js修改input、select默认字体颜色
Apr 19 #Javascript
利用node.js本地搭建HTTP服务器
Apr 19 #Javascript
You might like
DSP接收机前端设想
2021/03/02 无线电
玩转图像函数库―常见图形操作
2006/09/03 PHP
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
PHP处理会话函数大总结
2015/08/05 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
判定是否原生方法的JS代码
2013/11/12 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
vuejs实现标签选项卡动态更改css样式的方法
2018/05/31 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
js验证账户名是否重复
2020/05/26 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
python中管道用法入门实例
2015/06/04 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
Django框架models使用group by详解
2020/03/11 Python
python如何进行矩阵运算
2020/06/05 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
python sleep和wait对比总结
2021/02/03 Python
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
CSMA/CD介质访问控制协议
2015/11/17 面试题
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
公司授权委托书样本
2014/09/15 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
七年级地理教学计划
2015/01/22 职场文书
幼儿园六一主持词
2015/06/30 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书
go web 预防跨站脚本的实现方式
2021/06/11 Golang
Python基础 括号()[]{}的详解
2021/11/07 Python
如何利用python实现列表嵌套字典取值
2022/06/10 Python