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获取选中radio对应的值(一句代码)
Jun 03 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
Apr 16 Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
javascript实现下雨效果
Mar 27 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
JS严格模式原理与用法实例分析
Apr 27 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 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接口中interface存在的意义
2013/06/27 PHP
关于php中一些字符串总结
2016/05/05 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
JS分割字符串并放入数组的函数
2011/07/04 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
[58:58]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第二场
2018/04/05 DOTA
python安装numpy&amp;安装matplotlib&amp; scipy的教程
2017/11/02 Python
详解python Todo清单实战
2018/11/01 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
TheFork葡萄牙:欧洲领先的在线餐厅预订平台
2019/05/27 全球购物
params有什么用
2016/03/01 面试题
国际贸易专业求职信
2014/06/04 职场文书
委托证明模板
2014/09/16 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
复试通知单模板
2015/04/24 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
高一地理教学工作总结
2015/08/12 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书