Angularjs中ng-repeat的简单实例
更新时间：2017年08月25日 14:23:37 作者：魔豆
这篇文章主要介绍了Angularjs中ng-repeat的简单实例的相关资料,这里提供两个实例方法帮助大家彻底掌握这部分内容，需要的朋友可以参考下
Angularjs中ng-repeat的简单实例
第一个例子：使用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>学号</th>
<th>姓名</th>
<th>分数</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>
第二个例子：添加过滤条件
<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>学号</th>
<th>姓名</th>
<th>分数</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的使用实例，如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
相关文章
设计一个组件时，组件应该是内聚的，应该不依赖外部已经存在的组件，要实现这种松耦合的组件要使用中间人模式。2021-05-05
详解angularJs模块ui-router之状态嵌套和视图嵌套
这篇文章主要介绍了详解angularJs模块ui-router之状态嵌套和视图嵌套，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
本文续上文，接着介绍AngularJS语法，和上文一样，都是通过示例来向大家分析说明，非常不错的一篇文章，推荐给大家。2015-01-01
这篇文章主要介绍了AngularJS优雅的自定义指令，告诉大家为什么使用AngularJS自定义指令，以及如何使用AngularJS自定义指令？感兴趣的小伙伴们可以参考一下2016-07-07
这篇文章主要介绍了Angular2 环境配置的相关资料,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了AngularJS中的Promise详细介绍及实例代码的相关资料,Promise是一种模式，以同步操作的流程形式来操作异步事件，避免了层层嵌套，可以链式操作异步事件，需要的朋友可以参考下2016-12-12
本文主要介绍AngularJS ng-src 指令，这里对ng-src 指令的资料做了详细整理，有需要的小伙伴可以参考下2016-08-08
本文主要介绍AngularJS 路由,这里整理了相关资料进行详细介绍,并附实例代码和实现效果图,有需要的小伙伴可以参考下2016-07-07
下面小编就为大家分享一篇angularJS的radio实现单项二选一的使用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
AngularJS使用$http配置对象方式与服务端交互方法
今天小编就为大家分享一篇AngularJS使用$http配置对象方式与服务端交互方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论