angularjs過濾器--filter與ng-repeat配合有奇效

更新時間：2017年04月20日 09:00:40 作者：Mr_Sparta

本篇文章主要介紹了angularjs過濾器-filter與ng-repeat的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧

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="請輸入學(xué)校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: '中山大學(xué)', 
   }, 
   { 
    schoolId: 02, 
    schoolName: '廈門大學(xué)', 
   }, 
   { 
    schoolId: 03, 
    schoolName: '北京大學(xué)', 
   }, 
   { 
    schoolId: 04, 
    schoolName: '復(fù)旦大學(xué)', 
   } 
  ]; 
 });

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

AngularJS 整理一些優(yōu)化的小技巧
本文主要介紹AngularJS 一些優(yōu)化上的小技巧，這里整理了幾種方法供大家參考，有興趣的小伙伴可以參考下
2016-08-08
解決Angular2 router.navigate刷新頁面的問題
今天小編就為大家分享一篇解決Angular2 router.navigate刷新頁面的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
AngularJS入門教程之REST和定制服務(wù)詳解
本文主要講解 AngularJS REST和定制服務(wù)的知識，這里幫大家整理了相關(guān)知識，并附示例代碼，詳細講解了RES和定制服務(wù)的知識，有興趣的小伙伴可以參考下
2016-08-08
詳解使用angular的HttpClient搭配rxjs
本篇文章主要介紹了詳解使用angular的HttpClient搭配rxjs ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
使用Angular內(nèi)置模塊進行HTTP請求
這篇文章主要介紹了使用Angular內(nèi)置模塊進行HTTP請求方法步驟詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-10-10
AngularJS 過濾器（自帶和自建）詳解
這篇文章主要介紹了AngularJS 過濾器（自帶和自建）詳解的相關(guān)資料,需要的朋友可以參考下
2016-09-09
Ionic+AngularJS實現(xiàn)登錄和注冊帶驗證功能
這篇文章主要介紹了Ionic+AngularJS實現(xiàn)登錄和注冊帶驗證功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-02-02
Angular外部使用js調(diào)用Angular控制器中的函數(shù)方法或變量用法示例
這篇文章主要介紹了Angular外部使用js調(diào)用Angular控制器中的函數(shù)方法或變量用法,結(jié)合實例形式分析了Angular基于外部JS調(diào)用控制器中方法與變量的具體實現(xiàn)步驟與相關(guān)技巧,需要的朋友可以參考下
2016-08-08
angularjs項目的頁面跳轉(zhuǎn)如何實現(xiàn)（5種方法）
本篇文章主要介紹了詳解angularjs項目的頁面跳轉(zhuǎn)如何實現(xiàn) ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-05-05
AngularJS 霸道的過濾器小結(jié)
本篇文章主要介紹了AngularJS 霸道的過濾器小結(jié)，在實際操作中，我們需要對統(tǒng)一數(shù)據(jù)源進行多次轉(zhuǎn)換，本文詳細討論有關(guān)過濾器的用法。
2017-04-04