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岁"
}]
}
效果图
时间： 2024-10-12 19:51:49