且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

AngularJS的Foreach循环示例

更新时间:2022-09-22 19:04:43

代码下载:https://files.cnblogs.com/files/xiandedanteng/angularJSForeach.rar

代码:

AngularJS的Foreach循环示例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="notesApp">
 <head>
  <title> New Document </title>
    <meta charset="utf-8">
    <script src="angular1.4.6.min.js"></script>
 </head>

 <body ng-controller="MainCtrl as ctrl"> 
    <div ng-repeat="member in ctrl.members">
        {{member.id}}.name={{member.name}},age={{member.age}}
    <div>
 </body>
</html>
<script type="text/javascript">
<!--
    angular.module('notesApp',[])
     .controller('MainCtrl',[function(){
       var self=this;
       self.members=[
        {id:1,name:'andy',age:20},
        {id:2,name:'bill',age:21},
        {id:3,name:'cindy',age:22},
        {id:4,name:'douglas',age:23},
        {id:5,name:'einstein',age:24},
       ];
       
     }]);
//-->
</script>
AngularJS的Foreach循环示例

效果:

AngularJS的Foreach循环示例

要点:

ng-repeat指令是AngularJS中强大常用的指令之一,它能够遍历数组,通过键与值来访问数组的对象并将其显示在html中。










本文转自张昺华-sky博客园博客,原文链接:http://www.cnblogs.com/xiandedanteng/p/7413475.html,如需转载请自行联系原作者