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 相关文章推荐
基于jquery的返回顶部效果(兼容IE6)
Jan 17 Javascript
原生js实现给指定元素的后面追加内容
Apr 10 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
全面解析多种Bootstrap图片轮播效果
May 27 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
js动态设置select下拉菜单的默认选中项实例
Aug 21 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 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
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
php实现多城市切换特效
2015/08/09 PHP
PHP中each与list用法分析
2016/01/08 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
react build 后打包发布总结
2018/08/24 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
Python读写Excel文件的实例
2013/11/01 Python
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
python二分法查找算法实现方法【递归与非递归】
2019/12/06 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
自我鉴定怎么写
2013/12/05 职场文书
房屋公证委托书
2014/04/03 职场文书
公司请假条范文
2014/04/11 职场文书
解约证明模板
2015/06/19 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers