<div ng-app="CycleTableApp" ng-controller="CycleTableContrl as vm">
<h1>类别列表</h1>
<table class="table">
<thead>
<tr>
<th>类别编号</th>
<th>类别名称</th>
</tr>
</thead>
<tbody>
<!--ng-repeat指令，类似foreach循环-->
<tr ng-repeat="item in vm.firstSortList">
<td>
<p>{{ item.id}}</p>
</td>
<td>
<p>{{item.displayName}}</p>
</td>
</tr>
</tbody>
</table>
</div>
<script src="~/Scripts/angular.min.js"></script>
<script>
var app = angular.module('CycleTableApp', []);
app.controller('CycleTableContrl', function ($scope,$http) {
var vm = this;
vm.getdata = function () {
$http({
method: 'POST',
url: '/AngularjsStudy/GetFirstSort',
data: {}
}).then(function successCallback(data) {
//data有多余属性，data.data才是controller返回的data
vm.firstSortList = data.data;
}, function errorCallback(response) {
// 请求失败执行代码
});
}
vm.getdata();
});
</script>
Controller
public ActionResult GetFirstSort()
{
List<FirstSort> firstSorts = new List<FirstSort>();
firstSorts.Add(new FirstSort() {id=1,displayName= "绑定分类1" });
firstSorts.Add(new FirstSort() { id = 2, displayName = "绑定分类2" });
firstSorts.Add(new FirstSort() { id = 3, displayName = "绑定分类3" });
firstSorts.Add(new FirstSort() { id = 4, displayName = "绑定分类4" });
firstSorts.Add(new FirstSort() { id = 5, displayName = "绑定分类5" });
return Json(firstSorts);
}
实体类
public class FirstSort
{
public int id { get; set; }
public string displayName { get; set; }
}
转载于:https://www.cnblogs.com/Lulus/p/7874100.html
