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 相关文章推荐
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
javascript document.referrer 用法
Apr 30 Javascript
js Form.elements[i]的使用实例
Nov 13 Javascript
easyui validatebox验证
Apr 29 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
jquery实现直播弹幕效果
Nov 28 jQuery
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 Javascript
vue使用Sass时报错问题的解决方法
Oct 14 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 excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
javascript中的array数组使用技巧
2010/01/31 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
python下读取公私钥做加解密实例详解
2017/03/29 Python
Python3 Random模块代码详解
2017/12/04 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
python仿抖音表白神器
2019/04/08 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
Python3常用内置方法代码实例
2019/11/18 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
美国电视购物HSN官网:HSN
2016/09/07 全球购物
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
学院书画协会部门岗位职责
2013/12/01 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
升职自荐信范文
2015/03/27 职场文书
2015选调生工作总结
2015/07/24 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang