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中通过URL传递汉字的方法
Apr 09 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
js实现一键复制功能
Mar 16 Javascript
详解用node编写自己的cli工具
May 23 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
Dec 28 Javascript
Vue框架里使用Swiper的方法示例
Sep 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调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python类和函数中使用静态变量的方法
2015/05/09 Python
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
Python处理Excel文件实例代码
2017/06/20 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
国贸专业个人求职信范文
2014/01/08 职场文书
企业理念标语
2014/06/09 职场文书
小学中队活动总结
2015/05/11 职场文书
详解Laravel框架的依赖注入功能
2021/05/27 PHP
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
Win11任务栏无法正常显示 资源管理器不停重启的解决方法
2022/07/07 数码科技