<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; }
}

AngularJS table循环数据的更多相关文章

  1. AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除

    AngularJS实现表格数据的编辑,更新和删除 效果 实现 首先,我们先建立一些数据,当然你可以从你任何地方读出你的数据 var app = angular.module('plunker', [' ...

  2. Saiku Table展示数据合并bug修复(二十五)

    Saiku Table展示数据合并bug修复 Saiku以table的形式展示数据,如果点击了 非空的字段 按钮,则会自动进行数据合并,为空的数据行以及数据列都会自动隐藏掉. 首先我们应该定位问题: ...

  3. 使用angularJS接收json数据并进行数据的显示

    1.引入JS <script type="text/javascript" src="../plugins/angularjs/angular.min.js&quo ...

  4. R语言数据分析利器data.table包—数据框结构处理精讲

    R语言数据分析利器data.table包-数据框结构处理精讲 R语言data.table包是自带包data.frame的升级版,用于数据框格式数据的处理,最大的特点快.包括两个方面,一方面是写的快,代 ...

  5. asp.net将内容导出到Excel,Table表格数据(html)导出EXCEL

    代码: /// <summary> /// HTML Table表格数据(html)导出EXCEL /// </summary> /// <param name=&quo ...

  6. flashback table恢复数据

    flashback table恢复数据 flashback table主要是是用undo 表空间的内容,进行对数据修改的回退操作 语法如下: 根据scn号来进行回退 SQL> flashback ...

  7. OGG &quot;Loading data from file to Replicat&quot;table静态数据同步配置过程

    OGG "Loading data from file to Replicat"table静态数据同步配置过程 一个.mgr过程 GGSCI (lei1) 3> view p ...

  8. Layui使用table展示数据

    今天在Layui官网拿了一个table表格数据展示的源码,研究遇到了很多问题,最后才把数据展示出来,和大家分享下. 源码地址:https://www.layui.com/demo/table/oper ...

  9. SQL Server中Table字典数据的查询SQL示例代码

    SQL Server中Table字典数据的查询SQL示例代码 前言 在数据库系统原理与设计(第3版)教科书中这样写道: 数据库包含4类数据: 1.用户数据 2.元数据 3.索引 4.应用元数据 其中, ...

随机推荐

  1. php实现求最小的k个数(日常出错很容易是分号或者$符号忘记写了)

    php实现求最小的k个数(日常出错很容易是分号或者$符号忘记写了) 一.总结 日常出错很容易是分号或者$符号忘记写了 二.php实现求最小的k个数 题目描述 输入n个整数,找出其中最小的K个数.例如输 ...

  2. js 鼠标坐标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. android,安卓get请求的提交以及我遇到的异常

    首先说明 我是安卓4.0以上的版本,这个时候直接用网上的代码会报错的,先赋上网上的普遍代码 String uri = "http://url"; HttpGet httpGet = ...

  4. php 模拟get提交

    方法一: $re = file_get_contents($url); print_r($re); 方法二: $ch = curl_init("http://www.jb51.net/&qu ...

  5. [React Router v4] Style a Link that is Active with NavLink

    We often need to be able to apply style to navigation links based on the current route. In React Rou ...

  6. erlang抽象码与basho的protobuf

    erlang抽象码与basho的protobuf(一)使用 erlang抽象码与basho的protobuf(二)代码生成原理之词法与语法分析 erlang抽象码与basho的protobuf(三)代 ...

  7. Expression Blend 的点滴(3)--Templating的妙用,制作自己的ScrollBar控件

    原文:Expression Blend 的点滴(3)--Templating的妙用,制作自己的ScrollBar控件 在Blend中,有一个功能,Make into control---通过它可以方便 ...

  8. CentOS使用(一)-----各种环境搭建

    使用virtual box虚拟机,镜像为CentOS-6.9-x86_64-LiveDVD.iso,使用SecureCRT远程连接. 安装CentOS系统之后,选择host-only连接模式,修改虚拟 ...

  9. Display controller

    Field of the Invention The present invention relates to a display controller. Background to the inve ...

  10. 【codeforces 785C】Anton and Fairy Tale

    [题目链接]:http://codeforces.com/contest/785/problem/C [题意] 容量为n的谷仓,每一天都会有m个谷子入仓(满了就视为m);第i天 会有i只鸟叼走i个谷子 ...