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 相关文章推荐
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
Javascript 面向对象 继承
May 13 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 Javascript
jquery中animate的stop()方法作用实例分析
Jan 30 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 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面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
JS画线(实例代码)
2013/11/20 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
理发店策划方案
2014/06/05 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
母亲节寄语大全
2015/02/27 职场文书
合理化建议书范文
2015/09/14 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
Python中使用ipython的详细教程
2021/06/22 Python