Angularjs中ng-repeat的簡單實(shí)例
更新時(shí)間：2017年08月25日 14:23:37 作者：魔豆
這篇文章主要介紹了Angularjs中ng-repeat的簡單實(shí)例的相關(guān)資料,這里提供兩個(gè)實(shí)例方法幫助大家徹底掌握這部分內(nèi)容，需要的朋友可以參考下
Angularjs中ng-repeat的簡單實(shí)例
第一個(gè)例子：使用ng-repeat最簡單的例子
<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)文章
angular8.5集成TinyMce5的使用和詳細(xì)配置(推薦)
這篇文章主要介紹了angular8.5集成TinyMce5的使用和詳細(xì)配置,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-11
Angular應(yīng)用打包和部署實(shí)現(xiàn)過程詳解
這篇文章主要為大家介紹了Angular應(yīng)用打包和部署實(shí)現(xiàn)過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了Angular4編程之表單響應(yīng)功能,結(jié)合實(shí)例形式分析了Angular4表單響應(yīng)功能的具體實(shí)現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了Angular中支持SCSS的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
angular.js指令中的controller、compile與link函數(shù)的不同之處
最近一位大神問了我angular.js指令中的controller、compile與link函數(shù)的不同，想了想居然回答不出來，所以必須要深入的探究下，下面這篇文章主要介紹了關(guān)于angular.js指令中的controller、compile與link函數(shù)的不同之處，需要的朋友可以參考下。2017-05-05
AngularJS動(dòng)態(tài)綁定HTML的方法分析
這篇文章主要介紹了AngularJS動(dòng)態(tài)綁定HTML的方法,結(jié)合實(shí)例形式分析了AngularJS實(shí)現(xiàn)動(dòng)態(tài)綁定HTML的相關(guān)操作指令用法與使用注意事項(xiàng),需要的朋友可以參考下2016-11-11
關(guān)于Angular2 + node接口調(diào)試的解決方案
這篇文章主要給大家介紹了關(guān)于Angular2 + node接口調(diào)試的解決方案，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-05-05
angular2路由之routerLinkActive指令【推薦】
這篇文章主要介紹了angular2路由之routerLinkActive指令的相關(guān)資料,需要的朋友可以參考下2018-05-05
AngularJS select加載數(shù)據(jù)選中默認(rèn)值的方法
下面小編就為大家分享一篇AngularJS select加載數(shù)據(jù)選中默認(rèn)值的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
下面小編就為大家?guī)硪黄猘ngular.js之路由的選擇方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09