angularjs过滤器--filter与ng-repeat配合有奇效

 更新时间:2017年04月20日 09:00:40   作者:Mr_Sparta  
本篇文章主要介绍了angularjs过滤器-filter与ng-repeat的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧

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: '复旦大学', 
   } 
  ]; 
 }); 

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

相关文章

  • AngularJS前端页面操作之用户修改密码功能示例

    AngularJS前端页面操作之用户修改密码功能示例

    这篇文章主要介绍了AngularJS前端页面操作之用户修改密码功能,结合具体实例形式分析了AngularJS针对前端用户修改密码的判断操作实现技巧,需要的朋友可以参考下
    2017-03-03
  • AngularJS中的DOM操作用法分析

    AngularJS中的DOM操作用法分析

    这篇文章主要介绍了AngularJS中的DOM操作,较为详细的分析了AngularJS针对DOM操作的原理、实现技巧与相关注意事项,需要的朋友可以参考下
    2016-11-11
  • angular4应用中输入的最小值和最大值的方法

    angular4应用中输入的最小值和最大值的方法

    这篇文章主要介绍了angular4应用中输入的最小值和最大值的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • AngularJS入门教程之 XMLHttpRequest实例讲解

    AngularJS入门教程之 XMLHttpRequest实例讲解

    本文主要讲解 AngularJS XMLHttpRequest,这里给大家整理相关资料并提供实例代码,有需要的小伙伴参考下
    2016-07-07
  • AngularJs  Using $location详解及示例代码

    AngularJs Using $location详解及示例代码

    本文主要介绍AngularJs Using $location的知识资料,这里整理了相关的资料,及简单示例代码,有兴趣的小伙伴可以参考下
    2016-09-09
  • Angular2 自定义validators的实现方法

    Angular2 自定义validators的实现方法

    angular 当需要form表单需要验证时,angular自带了许多校验器,但是很多时候自带的无法满足业务需求,这时候就需要自定义的校验器,下面通过本文给大家分享Angular2 自定义validators的实现方法,需要的朋友参考下吧
    2017-07-07
  • 详解Angular2 之 结构型指令

    详解Angular2 之 结构型指令

    本篇文章主要介绍了详解Angular2 之 结构型指令,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • AngularJS应用开发思维之依赖注入3

    AngularJS应用开发思维之依赖注入3

    这篇文章主要为大家详细介绍了AngularJS应用开发思维之依赖注入第三篇,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 深入浅析AngularJS和DataModel

    深入浅析AngularJS和DataModel

    这篇文章主要介绍了深入浅析AngularJS和DataModel 的相关资料,需要的朋友可以参考下
    2016-02-02
  • AngularJS入门教程中SQL实例详解

    AngularJS入门教程中SQL实例详解

    本文主要介绍 AngularJS SQL,这里给大家整理了相关资料,并提供了实例代码,有需要的小伙伴可以参考下
    2016-07-07

最新评论