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; }
}
AngularJS table循环数据的更多相关文章
- AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除
AngularJS实现表格数据的编辑,更新和删除 效果 实现 首先,我们先建立一些数据,当然你可以从你任何地方读出你的数据 var app = angular.module('plunker', [' ...
- Saiku Table展示数据合并bug修复(二十五)
Saiku Table展示数据合并bug修复 Saiku以table的形式展示数据,如果点击了 非空的字段 按钮,则会自动进行数据合并,为空的数据行以及数据列都会自动隐藏掉. 首先我们应该定位问题: ...
- 使用angularJS接收json数据并进行数据的显示
1.引入JS <script type="text/javascript" src="../plugins/angularjs/angular.min.js&quo ...
- R语言数据分析利器data.table包—数据框结构处理精讲
R语言数据分析利器data.table包-数据框结构处理精讲 R语言data.table包是自带包data.frame的升级版,用于数据框格式数据的处理,最大的特点快.包括两个方面,一方面是写的快,代 ...
- asp.net将内容导出到Excel,Table表格数据(html)导出EXCEL
代码: /// <summary> /// HTML Table表格数据(html)导出EXCEL /// </summary> /// <param name=&quo ...
- flashback table恢复数据
flashback table恢复数据 flashback table主要是是用undo 表空间的内容,进行对数据修改的回退操作 语法如下: 根据scn号来进行回退 SQL> flashback ...
- OGG "Loading data from file to Replicat"table静态数据同步配置过程
OGG "Loading data from file to Replicat"table静态数据同步配置过程 一个.mgr过程 GGSCI (lei1) 3> view p ...
- Layui使用table展示数据
今天在Layui官网拿了一个table表格数据展示的源码,研究遇到了很多问题,最后才把数据展示出来,和大家分享下. 源码地址:https://www.layui.com/demo/table/oper ...
- SQL Server中Table字典数据的查询SQL示例代码
SQL Server中Table字典数据的查询SQL示例代码 前言 在数据库系统原理与设计(第3版)教科书中这样写道: 数据库包含4类数据: 1.用户数据 2.元数据 3.索引 4.应用元数据 其中, ...
随机推荐
- php实现求最小的k个数(日常出错很容易是分号或者$符号忘记写了)
php实现求最小的k个数(日常出错很容易是分号或者$符号忘记写了) 一.总结 日常出错很容易是分号或者$符号忘记写了 二.php实现求最小的k个数 题目描述 输入n个整数,找出其中最小的K个数.例如输 ...
- js 鼠标坐标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- android,安卓get请求的提交以及我遇到的异常
首先说明 我是安卓4.0以上的版本,这个时候直接用网上的代码会报错的,先赋上网上的普遍代码 String uri = "http://url"; HttpGet httpGet = ...
- php 模拟get提交
方法一: $re = file_get_contents($url); print_r($re); 方法二: $ch = curl_init("http://www.jb51.net/&qu ...
- [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 ...
- erlang抽象码与basho的protobuf
erlang抽象码与basho的protobuf(一)使用 erlang抽象码与basho的protobuf(二)代码生成原理之词法与语法分析 erlang抽象码与basho的protobuf(三)代 ...
- Expression Blend 的点滴(3)--Templating的妙用,制作自己的ScrollBar控件
原文:Expression Blend 的点滴(3)--Templating的妙用,制作自己的ScrollBar控件 在Blend中,有一个功能,Make into control---通过它可以方便 ...
- CentOS使用(一)-----各种环境搭建
使用virtual box虚拟机,镜像为CentOS-6.9-x86_64-LiveDVD.iso,使用SecureCRT远程连接. 安装CentOS系统之后,选择host-only连接模式,修改虚拟 ...
- Display controller
Field of the Invention The present invention relates to a display controller. Background to the inve ...
- 【codeforces 785C】Anton and Fairy Tale
[题目链接]:http://codeforces.com/contest/785/problem/C [题意] 容量为n的谷仓,每一天都会有m个谷子入仓(满了就视为m);第i天 会有i只鸟叼走i个谷子 ...