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 相关文章推荐
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 Javascript
AngularJS基础 ng-readonly 指令简单示例
Aug 02 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 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入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
php向js函数传参的几种方法
2014/08/10 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
javascript五图轮播切换实用版
2012/08/17 Javascript
Javascript中Event属性搜集整理
2013/09/17 Javascript
纯css+js写的一个简单的tab标签页带样式
2014/01/28 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
JS常用算法实现代码
2016/11/14 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
2019/11/06 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
Python实现图片拼接的代码
2018/07/02 Python
python添加菜单图文讲解
2019/06/04 Python
python绘制直方图和密度图的实例
2019/07/08 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
python dataframe NaN处理方式
2019/12/26 Python
python正则过滤字母、中文、数字及特殊字符方法详解
2020/02/11 Python
python实现图像拼接功能
2020/03/23 Python
500行python代码实现飞机大战
2020/04/24 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
浅谈three.js中的needsUpdate的应用
2012/11/12 HTML / CSS
搞笑创意广告语
2014/03/17 职场文书
学校招生宣传广告词
2014/03/19 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
浅析Python中的随机采样和概率分布
2021/12/06 Python