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 相关文章推荐
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
Mar 01 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
JavaScript手风琴页面制作
May 17 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
微信小程序入门之广告条实现方法示例
Dec 05 Javascript
javascript实现摄像头拍照预览
Sep 30 Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 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
建立动态的WML站点(一)
2006/10/09 PHP
php类常量的使用详解
2013/06/08 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
cookie的secure属性详解
2015/04/08 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
实例Python处理XML文件的方法
2015/08/31 Python
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
python和php学习哪个更有发展
2020/06/17 Python
python脚本和网页有何区别
2020/07/02 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
建筑经济管理专业求职信分享
2014/01/06 职场文书
个人作风剖析材料
2014/02/02 职场文书
个人委托书如何写
2014/09/25 职场文书
岗位职责范本大全
2015/02/26 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
信用卡收入证明范本
2015/06/12 职场文书
红楼梦读书笔记
2015/06/25 职场文书
优质护理心得体会
2016/01/22 职场文书
导游词之广州陈家祠
2019/10/21 职场文书