大佬教程收集整理的这篇文章主要介绍了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>
以上是大佬教程为你收集整理的Angularjs自动生成表格Table(用于数据回显)全部内容，希望文章能够帮你解决Angularjs自动生成表格Table(用于数据回显)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。