Angularjs中ng-repeat的简单实例
创新互联公司成立与2013年,是专业互联网技术服务公司,拥有项目网站建设、成都网站设计网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元汝城做网站,已为上家服务,为汝城各地企业和个人服务,联系电话:028-86922220
第一个例子:使用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的使用实例,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
分享名称:Angularjs中ng-repeat的简单实例
浏览路径:https://www.cdcxhl.com/article36/jcposg.html
成都网站建设公司_创新互联,为您提供网站收录、微信公众号、云服务器、软件开发、面包屑导航、App设计
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联