溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Angularjs自動生成表格Table(用于數(shù)據(jù)回顯)

發(fā)布時(shí)間：2020-03-23 01:04:56 來源：網(wǎng)絡(luò) 閱讀：536 作者：愛情89757 欄目：web開發(fā)

Angularjs自動生成表格Table

1、使用場景：
（1）使用Augularjs請求后臺，查詢記錄，將返回的記錄以表格的形式進(jìn)行顯示；
（2）對表格進(jìn)行編輯時(shí)，數(shù)據(jù)回顯

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  id="tr" ng-repeat="x in records">
     <td>
         <select name="merchant" id="merchant" ng-model="data.merchantNo">
             <option value="">請選擇供應(yīng)商</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="">請選擇權(quán)益分類</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", url : "http://www.google.com"}],
      "address" :"BJ",
       "job":"lT"
    },
    {
     "Name" :[{site : "Apple", url : "http://www.Apple.com"}],
      "Country" : [{site : "Google3", url : "http://www.google.com"}],
         "address" :"EJ",
       "job":"TK"
    },
    {
      "Name" :[{site : "Balba", url : "http://www.bble.com"}],
      "Country" : [{site : "Google4", url : "http://www.google.com"}],
         "address" :"EJ",
       "job":"3K"
    },
    {
      "Name" :[{site : "CAtba", url : "http://www.cat.com"}],
    "Country" : [{site : "Google5", url : "http://www.google.com"}],
         "address" :"BJ",
       "job":"2K"
    },
    {
     "Name" :[{site : "dog", url : "http://www.dog.com"}],
   "Country" : [{site : "Google6", url : "http://www.google.com"}],
         "address" :"BJ",
       "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  id="tr" ng-repeat="x in records">
     <td>
         <select name="merchant" id="merchant" ng-model="data.merchantNo">
             <option value="">請選擇供應(yīng)商</option>
            <option ng-repeat="(a,b) in x.Name" value="{{a}}" selected>{}</option>
         </select>
     </td>
     <td>
         <select name="category" id="category" ng-model="data.categoryNo">
             <option value="">請選擇權(quán)益分類</option>
              <option ng-repeat="(a,b) in x.Country" value="{{a}}" selected>{}</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" :{ "Google": "http://www.google1.com"},
      "Country" :{"Google2": "http://www.google1.com"},
      "address" :"BJ",
       "job":"lT"
    },
    {
     "Name" :{"Apple":"http://www.Apple2.com"},
      "Country" : {"Google3":"http://www.google2.com"},
      "address" :"EJ",
      "job":"TK"
    },
    {
      "Name" :{"Balba" : "http://www.bble3.com"},
      "Country" : { "Google4" : "http://www.google3.com"},
       "address" :"EJ",
       "job":"3K"
    },
    {
     "Name" :{"CAtba": "http://www.cat4.com"},
     "Country" : {"Google5": "http://www.google4.com"},
      "address" :"BJ",
      "job":"2K"
    },
    {
    "Name" :{"dog": "http://www.dog5.com"},
   "Country" : {"Google6": "http://www.google5.com"},
    "address" :"BJ",
     "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", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
    {
      "Name" : "Alfreds Futterkiste",
      "Country" : "Germany",
      "address" :"BJ",
       "job":"lT"
    },
    {
      "Name" : "Berglunds snabbk",
      "Country" : "Sweden",
         "address" :"EJ",
       "job":"TK"
    },
    {
      "Name" : "Centro comercial Moctezuma",
      "Country" : "Mexico",
         "address" :"EJ",
       "job":"3K"
    },
    {
      "Name" : "Ernst Handel",
      "Country" : "Austria",
         "address" :"BJ",
       "job":"2K"
    }
  ]
});
</script>

</body>
</html>

3、總結(jié)
上面分別模擬了后臺返回不同的數(shù)據(jù)類型時(shí)，前臺如何使用Angularjs解析數(shù)據(jù)進(jìn)行顯示。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手