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