基于json数据的angular实现table循环数据显示

基于json数据的angular实现table循环的后台数据（数据是前端给出写死的）显示，很简单，很好用。

直接上代码

<!doctype html>
<html>
<head>
    <title>phone</title>
    <!--设置字符集-->
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <!--禁止页面缩放-->
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <!--忽略页面中的数字识别为电话号码-->
    <meta name="format-detection" content="telephone=no" />
    <!--网站开启对web app程序支持-->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!--改变顶部状态条的颜色
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    -->
    <!--作者信息-->
    <script type="text/javascript" src="http://chantrans.oss-cn-hangzhou.aliyuncs.com/public/js/jquery-1.10.1.min.js"></script>
     <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script> <!--引进angularjs-->
    <style type="text/css">  
    table tr:nth-child(odd){
      background-color: #f1f1f1
    }
    table tr:nth-child(even){
      background-color: #ffffff
    }
    table,td,tr{
      border: 1px solid black;
      border-collapse: collapse;
    }
    </style>
</head>
<body>
   <table ng-app="myApp" ng-controller="mytro">
     <tr>
       <th>姓名</th>
       <th>性别</th>
       <th>年龄</th>
     </tr>
     <tr ng-repeat="x in names">
       <td>{{x.name}}</td>
       <td>{{x.gender}}</td>
       <td>{{x.old}}</td>
     </tr>
   </table>
</body>
   <script type="text/javascript">
    var app = angular.module('myApp', []);
  　app.controller('mytro', function($scope) {
    　　var s='{"student":[{"name":"wangxupeng","gender":"male","old":18},{"name":"wenmenghu","gender":"fema　　　　le"    ,"old":20}]}';
    　　$scope.names=eval("("+s+")").student;//JSON数据格式方式
    　　/*var s2=[{name:"wangxupeng",gender:"male",old:18},{name:"wenmenghu",gender:"female",old:20}];
    　　$scope.names=s2;*/      /*正常数组方式*/
　　});
   </script>
</html>

posted on 2015-12-01 16:35 王叙鹏阅读(522) 评论(0) 编辑收藏举报