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 相关文章推荐
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 Javascript
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
第一个Vue插件从封装到发布
Nov 22 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 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
PHP简单判断iPhone、iPad、Android及PC设备的方法
2016/10/11 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
iis 7下安装laravel 5.4环境的方法教程
2017/06/14 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
js 学习笔记(三)
2009/12/29 Javascript
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
如何使node也支持从url加载一个module详解
2018/06/05 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
python psutil模块使用方法解析
2019/08/01 Python
Python如何在DataFrame增加数值
2020/02/14 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
高中校园广播稿
2014/01/11 职场文书
开工庆典邀请函范文
2014/01/16 职场文书
开工典礼策划方案
2014/05/23 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
北京故宫导游词
2015/01/31 职场文书
贫困证明怎么写
2015/06/16 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js
公历12个月名称的由来
2022/04/12 杂记