Angularjs中ng-repeat的簡(jiǎn)單實(shí)例
更新時(shí)間：2017年08月25日 14:23:37 作者：魔豆
這篇文章主要介紹了Angularjs中ng-repeat的簡(jiǎn)單實(shí)例的相關(guān)資料,這里提供兩個(gè)實(shí)例方法幫助大家徹底掌握這部分內(nèi)容，需要的朋友可以參考下
Angularjs中ng-repeat的簡(jiǎn)單實(shí)例
第一個(gè)例子：使用ng-repeat最簡(jiǎn)單的例子
<html ng-app="myApp">
<head>
<title>angularjs-demo</title>
<script type="text/javascript" src="angular.min.js" charset="utf-8"></script>
</head>
<body ng-controller="ctrl">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<th>學(xué)號(hào)</th>
<th>姓名</th>
<th>分?jǐn)?shù)</th>
</tr>
<tr ng-repeat="item in items">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.score}}</td>
</tr>
</table>
<script>
var app = angular.module('myApp',[]);
app.controller("ctrl",function($scope,$location){
$scope.items = getStu();
});
function getStu() {
return [{id:1010,name:'張三',score:50},{id:1011,name:'李四',score:60},{id:1012,name:'王五',score:80}];
}
</script>
</body>
</html>
第二個(gè)例子：添加過濾條件
<html ng-app="myApp">
<head>
<title>angularjs-demo</title>
<script type="text/javascript" src="angular.min.js" charset="utf-8"></script>
</head>
<body ng-controller="ctrl">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<th>學(xué)號(hào)</th>
<th>姓名</th>
<th>分?jǐn)?shù)</th>
</tr>
<tr ng-repeat="item in items | filter:fscore">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.score}}</td>
</tr>
</table>
<script>
var app = angular.module('myApp',[]);
app.controller("ctrl",function($scope,$location){
$scope.items = getStu();
$scope.fscore = function(e) {
return e.score>=60;
}
});
function getStu() {
return [{id:1010,name:'張三',score:50},{id:1011,name:'李四',score:60},{id:1012,name:'王五',score:80}];
}
</script>
</body>
</html>
以上就是AngularJs 中ng-repent的使用實(shí)例，如有疑問請(qǐng)留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
AngularJS學(xué)習(xí)筆記之基本指令(init、repeat)
AngularJS 指令是擴(kuò)展的 HTML 屬性，帶有前綴 ng-。ng-app 指令初始化一個(gè) AngularJS 應(yīng)用程序。ng-init 指令初始化應(yīng)用程序數(shù)據(jù)。ng-model 指令把應(yīng)用程序數(shù)據(jù)綁定到 HTML 元素。2015-06-06
AngularJS+Node.js實(shí)現(xiàn)在線聊天室
隨著互聯(lián)網(wǎng)和信息技術(shù)的發(fā)展，如何快速構(gòu)建高效、強(qiáng)大的動(dòng)態(tài)網(wǎng)站成為很多人研究的熱點(diǎn)。該文將結(jié)合AngularJS和Node.js構(gòu)建一個(gè)在線聊天室，體現(xiàn)AngularJs和Node.js整合的優(yōu)點(diǎn)。2015-08-08
這篇文章主要為大家詳細(xì)介紹了AngularJS過濾器的使用方法，感興趣的小伙伴們可以參考一下2016-03-03
AngularJS基于http請(qǐng)求實(shí)現(xiàn)下載php生成的excel文件功能示例
這篇文章主要介紹了AngularJS基于http請(qǐng)求實(shí)現(xiàn)下載php生成的excel文件功能,結(jié)合實(shí)例形式分析了AngularJS http請(qǐng)求及文件下載等相關(guān)操作技巧,需要的朋友可以參考下2018-01-01
AngularJs定制樣式插入到ueditor中的問題小結(jié)
這篇文章主要介紹了AngularJs定制樣式插入到ueditor中的問題小結(jié)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
詳解Angular.js的$q.defer()服務(wù)異步處理
相信大家都知道jquery和angular都有defer服務(wù)，這篇文章暫以angular為例談?wù)剛€(gè)人的理解，在文章的最后并附上jquery的阮一峰總結(jié)的defer。有需要的朋友們也可以參考借鑒，下面來一起學(xué)習(xí)學(xué)習(xí)吧。2016-11-11
angularjs實(shí)現(xiàn)Tab欄切換效果
這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)Tab欄切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
詳解@angular/cli 改變默認(rèn)啟動(dòng)端口兩種方式
這篇文章主要介紹了詳解@angular/cli 改變默認(rèn)啟動(dòng)端口兩種方式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
如何解決手機(jī)瀏覽器頁(yè)面點(diǎn)擊不跳轉(zhuǎn)瀏覽器雙擊放大網(wǎng)頁(yè)
這篇文章主要介紹了如何解決手機(jī)瀏覽器頁(yè)面點(diǎn)擊不跳轉(zhuǎn)瀏覽器雙擊放大網(wǎng)頁(yè)的相關(guān)資料,需要的朋友可以參考下2016-07-07
這篇文章主要介紹了AngularJS中的DOM操作,較為詳細(xì)的分析了AngularJS針對(duì)DOM操作的原理、實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-11-11