angularjs中ng-repeat的使用
2016-09-14 15:18
531 查看
第一个例子:使用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-repeat中使用ng-model遇到的问题
- 在使用angularjs过程,ng-repeat中track by的作用
- AngularJS最佳实践: 请小心使用 ng-repeat 中的 $index
- AngularJS中使用ng-repeat的index
- AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
- 如何用angularjs制作一个完整的表格之三__在ng-repeat中使用ng-model
- AngularJs 在ng-repeat中动态使用ng-model进行双向数据绑定
- 使用angularjs中ng-repeat的$even与$odd属性时的注意事项
- AngularJS - 在ng-repeat中使用ng-click为元素添加class
- [Angularjs]ng-repeat中使用ng-model遇到的问题
- angularjs在ng-repeat中使用ng-model遇到的问题
- angularjs 使用ng-repeat报错
- angularjs中使用ng-repeat渲染最后一个li的时候设置不同样式
- angularJs中的ng-repeat的使用
- AngularJS使用 ng-repeat 中的 $index与替代方法
- AngularJS最佳实践: 请小心使用 ng-repeat 中的 $index
- AngularJS:如何使用自定义指令来取代ng-repeat
- AngularJS:如何使用自定义指令来取代ng-repeat
- AngularJS实践之使用ng-repeat中$index的注意点
- AngularJS中ng-repeat使用心得