Angularjs自動生成表格Table(用於資料回顯)
阿新 • • 發佈：2019-01-02
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", 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 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", []); 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、總結
上面分別模擬了後臺返回不同的資料型別時，前臺如何使用Angularjs解析資料進行顯示。