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解析数据进行显示。
Angularjs自动生成表格Table(用于数据回显)
原文地址：http://blog.51cto.com/59465168/2337960