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 checkbox,radio是否选中的判断代码
Mar 20 Javascript
jquery下json数组的操作实现代码
Aug 09 Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
Script标签与访问HTML页面详解
Jan 10 Javascript
JS 弹出层 定位至屏幕居中示例
May 21 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
vue 虚拟dom的patch源码分析
Mar 01 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
微信小程序实现简单跑马灯效果
May 26 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
微信小程序tab左右滑动切换功能的实现代码
Feb 08 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数组相关函数汇总
2015/03/24 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
Python入门教程之if语句的用法
2015/05/14 Python
python3写爬取B站视频弹幕功能
2017/12/22 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
南京软件公司的.net程序员笔试题
2014/08/31 面试题
Java文件和目录(IO)操作
2014/08/26 面试题
管理科学大学生求职信
2013/11/13 职场文书
装饰公司活动策划方案
2014/08/23 职场文书
2014中学教师节广播稿
2014/09/10 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python