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 相关文章推荐
javascript call和apply方法
Nov 24 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
微信JS SDK接入的几点注意事项(必看篇)
Jun 23 Javascript
webpack4打包vue前端多页面项目
Sep 17 Javascript
详解vue配置后台接口方式
Mar 29 Javascript
前端插件之Bootstrap Dual Listbox使用教程
Jul 23 Javascript
Element Popover 弹出框的使用示例
Jul 26 Javascript
vue中配置scss全局变量的步骤
Dec 28 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
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
用 JSON 处理缓存
2007/04/27 Javascript
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
javascript 清除输入框中的数据
2009/04/13 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
2014/11/12 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
详解nodejs模板引擎制作
2017/06/14 NodeJs
react-native动态切换tab组件的方法
2018/07/07 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
Python之str操作方法(详解)
2017/06/19 Python
Python3中使用PyMongo的方法详解
2017/07/28 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
django云端留言板实例详解
2019/07/22 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
物流管理毕业生自荐信
2013/10/24 职场文书
2014年群众路线党员自我评议
2014/09/24 职场文书
新教师个人工作总结
2015/02/06 职场文书
学生检讨书怎么写
2015/05/07 职场文书
2016新年晚会开场白
2015/12/03 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
Pygame Rect区域位置的使用(图文)
2021/11/17 Python