溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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 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 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解析數據進行顯示。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
