基於json數據的angular實現table循環數據顯示

時間 2019-11-11

標籤基於 json 數據 angular 實現 table 循環顯示欄目 JavaScript 简体版

原文原文鏈接

基於json數據的angular實現table循環的後臺數據（數據是前端給出寫死的）顯示，很簡單，很好用。javascript

直接上代碼css

<!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>