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 Array增加each方法
Apr 07 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
jquery自定义属性(类型/属性值)
May 21 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
jquery控制display属性为none或block
Mar 31 Javascript
jquery实现网页定位导航
Aug 23 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
Vue.extend实现挂载到实例上的方法
May 01 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
js实现适配移动端的拖动效果
Jan 13 Javascript
微信小程序实现简单的select下拉框
Nov 23 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的FTP学习(二)[转自奥索]
2006/10/09 PHP
Array of country list in PHP with Zend Framework
2011/10/17 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
javascript 流畅动画实现原理
2009/09/08 Javascript
javascript 闭包疑问
2010/12/30 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python数据库的连接实现方法与注意事项
2016/02/27 Python
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
python获取代码运行时间的实例代码
2018/06/11 Python
python 实现绘制整齐的表格
2019/11/18 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
详解python中的闭包
2020/09/07 Python
python中字典增加和删除使用方法
2020/09/30 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
正隆泰信息技术有限公司上机题
2012/06/14 面试题
初一体育教学反思
2014/01/29 职场文书
《草原》教学反思
2014/02/15 职场文书
教师考核评语
2014/04/28 职场文书
大专学生求职信
2014/07/04 职场文书
五五普法心得体会
2014/09/04 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
2015年元旦促销方案书
2014/12/09 职场文书