Angularjs自动生成表格Table(用于数据回显)

发布时间：2020-12-17 07:03:04 所属栏目：安全来源：网络整理

导读：Angularjs自动生成表格Table 1、使用场景：（1）使用Augularjs请求后台，查询记录，将返回的记录以表格的形式进行显示；（2）对表格进行编辑时，数据回显 2、使用方式（1）方式1 !DOCTYPE htmlhtmlheadmeta charset="utf-8"script src="https://cdn.stati

Angularjs自动生成表格Table

1、使用场景：
（1）使用Augularjs请求后台，查询记录，将返回的记录以表格的形式进行显示；
（2）对表格进行编辑时，数据回显

2、使用方式
（1）方式1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">

<table ng-controller="myCtrl" border="1">
<tr ng-repeat="x in records">
  <td>{{x.Name}}</td>
  <td>{{x.Country}}</td>  
 <td>{{x.address}}</td>  
    <td>{{x.job}}</td>  
</tr>

 <tr style="border:0px" id="tr" ng-repeat="x in records">
     <td>
         <select name="merchant" id="merchant" ng-model="data.merchantNo">
             <option value="">请选择供应商</option>
            <option ng-repeat="a in x.Name" value="{{a.url}}" selected>{{a.site}}</option>
         </select>
     </td>
     <td>
         <select name="category" id="category" ng-model="data.categoryNo">
             <option value="">请选择权益分类</option>
              <option ng-repeat="a in x.Country" value="{{a.url}}" selected>{{a.site}}</option>
         </select>
     </td>
     <td><input type="text" name="rightCode" id="rightCode" value="{{x.address}}"/></td>
     <td><input type="text" name="rightName" id="rightName" value="{{x.job}}" /></td>
    </tr>   
</table>

<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope) {
  $scope.records = [
    {
      "Name" :[{site : "Google",url : "http://www.google.com"}],"Country" : [{site : "Google2","address" :"BJ","job":"lT"
    },{
     "Name" :[{site : "Apple",url : "http://www.Apple.com"}],"Country" : [{site : "Google3","address" :"EJ","job":"TK"
    },{
      "Name" :[{site : "Balba",url : "http://www.bble.com"}],"Country" : [{site : "Google4","job":"3K"
    },{
      "Name" :[{site : "CAtba",url : "http://www.cat.com"}],"Country" : [{site : "Google5","job":"2K"
    },{
     "Name" :[{site : "dog",url : "http://www.dog.com"}],"Country" : [{site : "Google6","job":"2K"
    }
  ]
});
</script>

</body>
</html>

（2）方式2

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">

<table ng-controller="myCtrl" border="1">
<tr ng-repeat="x in records">
  <td>{{x.Name}}</td>
  <td>{{x.Country}}</td>  
 <td>{{x.address}}</td>  
    <td>{{x.job}}</td>  
</tr>

 <tr style="border:0px" id="tr" ng-repeat="x in records">
     <td>
         <select name="merchant" id="merchant" ng-model="data.merchantNo">
             <option value="">请选择供应商</option>
            <option ng-repeat="(a,b) in x.Name" value="{{a}}" selected>{{b}}</option>
         </select>
     </td>
     <td>
         <select name="category" id="category" ng-model="data.categoryNo">
             <option value="">请选择权益分类</option>
              <option ng-repeat="(a,b) in x.Country" value="{{a}}" selected>{{b}}</option>
         </select>
     </td>
     <td><input type="text" name="rightCode" id="rightCode" value="{{x.address}}"/></td>
     <td><input type="text" name="rightName" id="rightName" value="{{x.job}}" /></td>
    </tr>   
</table>

<script>
var app = angular.module("myApp",function($scope) {
  $scope.records = [
    {
      "Name" :{ "Google": "http://www.google1.com"},"Country" :{"Google2": "http://www.google1.com"},{
     "Name" :{"Apple":"http://www.Apple2.com"},"Country" : {"Google3":"http://www.google2.com"},{
      "Name" :{"Balba" : "http://www.bble3.com"},"Country" : { "Google4" : "http://www.google3.com"},{
     "Name" :{"CAtba": "http://www.cat4.com"},"Country" : {"Google5": "http://www.google4.com"},{
    "Name" :{"dog": "http://www.dog5.com"},"Country" : {"Google6": "http://www.google5.com"},"job":"2K"
    }
  ]
});
</script>

</body>
</html>

（3）方式3

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">

<table ng-controller="myCtrl" border="1">
<tr ng-repeat="x in records">
  <td>{{x.Name}}</td>
  <td>{{x.Country}}</td>  
 <td>{{x.address}}</td>  
    <td>{{x.job}}</td>  
</tr>
</table>

<script>
var app = angular.module("myApp",function($scope) {
  $scope.records = [
    {
      "Name" : "Alfreds Futterkiste","Country" : "Germany",{
      "Name" : "Berglunds snabbk","Country" : "Sweden",{
      "Name" : "Centro comercial Moctezuma","Country" : "Mexico",{
      "Name" : "Ernst Handel","Country" : "Austria","job":"2K"
    }
  ]
});
</script>

</body>
</html>

3、总结上面分别模拟了后台返回不同的数据类型时，前台如何使用Angularjs解析数据进行显示。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!