AngularJS table循环数据

<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