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自执行函数之伪命名空间封装法
Dec 25 Javascript
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
Jun 28 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 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
Search Engine Friendly的URL设计
2006/10/09 PHP
php存储过程调用实例代码
2013/02/03 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
IE8 原生JSON支持
2009/04/13 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
小程序分享模块超级详解(推荐)
2019/04/10 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
[01:32]DOTA2次级联赛——首支职业女子战队选拔赛全记录
2014/10/23 DOTA
[07:06]2018DOTA2国际邀请赛寻真——卫冕冠军Team Liquid
2018/08/10 DOTA
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
空指针到底是什么
2012/08/07 面试题
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
期终自我鉴定
2014/02/17 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
网络营销计划书
2015/01/17 职场文书
实习单位鉴定意见
2015/06/04 职场文书
人力资源部工作计划
2019/05/14 职场文书