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 相关文章推荐
javascript 学习之旅 (2)
Feb 05 Javascript
JSON 客户端和服务器端的格式转换
Aug 27 Javascript
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
浅谈javascript属性onresize
Apr 20 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
利用JS hash制作单页Web应用的方法详解
Oct 10 Javascript
vue+iview写个弹框的示例代码
Dec 05 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
Apr 09 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 Javascript
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
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
傻瓜化配置PHP环境――Appserv
2006/12/13 PHP
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(一)
2014/06/23 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
php分页查询的简单实现代码
2017/03/14 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
pyv8学习python和javascript变量进行交互
2013/12/04 Python
python中List的sort方法指南
2014/09/01 Python
Python装饰器使用示例及实际应用例子
2015/03/06 Python
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
浅谈Python3中print函数的换行
2020/08/05 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
汽车检测与维修专业求职信
2013/10/30 职场文书
内刊编辑求职自荐书范文
2014/02/19 职场文书
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书