Angularjs中ng-repeat的简单实例

2019-11-19 15:40:31

字体：大中小

来源：转载

供稿：网友

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的使用实例，如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

上一篇：NodeJS收发GET和POST请求的示例代码

下一篇：Nodejs 和Session 原理及实战技巧小结