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 判断脚本加载完毕的代码
Jul 13 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
使用js画图之圆、弧、扇形
Jan 12 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
JS实现二维数组元素的排列组合运算简单示例
Jan 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编程 SSO详细介绍及简单实例
2017/01/13 PHP
jQuery 白痴级入门教程
2009/11/11 Javascript
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
javascript动态创建表格及添加数据实例详解
2015/05/13 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
ECharts仪表盘实例代码(附源码下载)
2016/02/18 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
python实现函数极小值
2019/07/10 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
怎样在程序里获得一个空指针
2015/01/24 面试题
网络研修随笔感言
2014/02/17 职场文书
检查接待方案
2014/02/27 职场文书
美容院经理岗位职责
2014/04/03 职场文书
初中生评语大全
2014/04/24 职场文书
网络优化专员求职信
2014/05/04 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python
Android自定义双向滑动控件
2022/04/19 Java/Android