html
1 <html> 2 <head> 3 <meta charset="utf-8"/> 4 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 5 <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ></script> 6 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script> 7 <style type="text/css"> 8 html,body{margin: 0;padding: 0; box-sizing: border-box;} 9 table{width: 100%; border-collapse:collapse; text-align: center;} 10 thead{background-color: #CCCCCC;} 11 th,td{border:1px solid red; } 12 ul{padding: 0; margin: 0;} 13 ul li{list-style: none; background-position: ;} 14 </style> 15 </head> 16 <body> 17 <div ng-app="myapp"> 18 <div ng-controller="one"> 19 姓名:<input type="text" ng-model="name"/><br/> 20 您好，{{name}}<br/> 21 性别是{{sex}}<br/> 22 当前的url是{{myurl}}<br/> 23 请求的第一条数据是： 24 <fieldset> 25 <legend>Student</legend> 26 <table > 27 <thead> 28 <tr> 29 <th>名字</th> 30 <th>班级</th> 31 <th>年龄</th> 32 </tr> 33 </thead> 34 <tbody> 35 <tr> 36 <td>{{sname}}</td> 37 <td>{{sclass}}</td> 38 <td>{{sage}}</td> 39 </tr> 40 </tbody> 41 </table> 42 </fieldset> 43 </div> 44 45 <hr style="margin:50px 0;height:1px;border:0px;background-color:#D5D5D5;color:red;"/> 46 47 48 <div ng-controller="two"> 49 循环指令测试 50 <ul> 51 <li ng-repeat="x in myli">{{x}}</li> 52 </ul><br/> 53 54 55 循环指令实际应用：<br/> 56 参考在表格中显示数据<br/><a href="http://www.runoob.com/angularjs/angularjs-tables.html">http://www.runoob.com/angularjs/angularjs-tables.html</a> 57 <fieldset> 58 <legend>Teacher</legend> 59 <table > 60 <thead> 61 <tr> 62 <th>名字</th> 63 <th>性别</th> 64 <th>年龄</th> 65 </tr> 66 </thead> 67 <tbody> 68 <tr ng-repeat="y in mytable"> 69 <td>{{y.name}}</td> 70 <td>{{y.sex}}</td> 71 <td>{{y.age}}</td> 72 </tr> 73 </tbody> 74 </table> 75 </fieldset> 76 </div> 77 </div> 78 <script type="text/javascript"> 79 80 var myapp=angular.module("myapp",[]); 81 //第一个控制器 82 myapp.controller("one",function($scope,$location,$http){ 83 $scope.name="丁少华"; 84 $scope.sex="男"; 85 $scope.myurl=$location.absUrl(); 86 87 //ajax 88 $http.get("js/People.json").then(function(request){ 89 $scope.sname=request.data.student[0].name; 90 $scope.sclass=request.data.student[0].clas; 91 $scope.sage=request.data.student[0].age; 92 }) 93 94 95 }) 96 97 //第二个控制器 98 myapp.controller("two",function($scope,$http){ 99 $scope.myli = [ 100 "第一个", 101 "第二个", 102 "第三个", 103 ] 104 105 //ajax 106 $http.get("js/People.json").success(function(request){ 107 $scope.mytable = request.teacher; 108 }) 109 }) 110 </script> 111 </body> 112 </html>
json
{ "student":[{ "name" :"丁少华", "clas":"二(1)班", "age":"10岁" },{ "name" :"王鑫", "clas":"二(2)班", "age":"8岁" }], "teacher":[{ "name":"王老师", "sex":"男", "age":"25岁" },{ "name":"张老师", "sex":"女", "age":"30岁" },{ "name":"李老师", "sex":"女", "age":"20岁" }] }
效果图
