1-碎碎记

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>

View Code

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岁"
 }]
}

View Code

效果图