[英]Why angular not binding Data in ng-model
Here I'm getting data from the database and I also trace that data from Fiddler but when I'm trying to bind data in an angular table it's not binding 在这里,我从数据库中获取数据,也从Fiddler中跟踪该数据,但是当我尝试将数据绑定到角度表中时,它没有绑定
Linq Query Linq查询
public JsonResult GetSalesData()
{
using (Ctxdb dc = new Ctxdb())
{
var v = (from a in dc.SalesRecords
group a by a.SalesDate.Year into g
select new
{
Year = g.Key,
Electronics = g.Sum(a => a.Electronics),
BookAndMedia = g.Sum(a => a.BookAndMedia),
HomeAndKitchen = g.Sum(a => a.HomeAndKitchen)
});
if (v != null)
{
var chartData = new object[v.Count() + 1];
chartData[0] = new object[]{
"Year",
"Electronics",
"Book and Media",
"Home and KitchenKFC"
};
int j = 0;
foreach (var i in v)
{
j++;
chartData[j] = new object[] { i.Year.ToString(), i.Electronics, i.BookAndMedia, i.HomeAndKitchen };}
return new JsonResult { Data = chartData, JsonRequestBehavior = JsonRequestBehavior.AllowGet };}}
return new JsonResult { Data = null, JsonRequestBehavior = JsonRequestBehavior.AllowGet };}
Fidller Data 资料
[["Year","Electronics","Book and Media","Home and KitchenKFC"],["1947",99489,46000,26833],["1995",25555,45000,99000],["2011",1584,5685,5566],["2012",12121,1500,1200],["2014",600,5132,2730],["2015",1789,1255,1258]]
Angular Service 角度服务
app.service('MyGraphService', function ($http) {
this.GetJanu = function () {
alert('in Service')
var Sert = $http({
url: '/Department/GetSalesData',
method: 'GET',
data: JSON.stringify(),
content:{'content-type' :'application/Json'}
})
return Sert;
}
})
Angular Controller 角度控制器
app.controller('GraphCntrls', function ($scope, MyGraphService) {
$scope.Btnclick = function () {
alert('in cntr')
var tt = MyGraphService.GetJanu();
tt.then(function (d) {
$scope.DataGraphf = d.data;
})
}
})
Cshtml Code Cshtml代码
<div>
<div ng-controller="GraphCntrls">
<input type="button" ng-click="Btnclick()" value="Click" class="btn btn-success btn-sm"/>
<table class="table table-striped table-bordered">
<tr>
<th><b>Year</b></th>
<th><b>Electronics</b></th>
<th><b>Book and Media</b></th>
<th><b>Home and KitchenKFC</b></th>
</tr>
@*<tr ng-repeat="datf in DataGraphf">*@
<tr>
<td>{{Year}}</td>
<td>{{datf.Electronics}}</td>
<td>{{datf.BookAndMedia}}</td>
<td>{{datf.HomeAndKitchen}}</td>
</tr>
</table>
</div>
</div>
Change the table row to this: 将表行更改为此:
<tr ng-repeat="datf in DataGraphf" ng-if="!$first">
<td>{{datf[0]}}</td>
<td>{{datf[1]}}</td>
<td>{{datf[2]}}</td>
<td>{{datf[3]}}</td>
</tr>
since you are returning an array of arrays, and the first index being table headers. 因为您要返回一个数组数组,并且第一个索引是表头。 you want to hide the first results element with ng-if="!$first"
. 您想使用ng-if="!$first"
隐藏第一个result元素。 Then your subsequent elements are arrays with 4 values, so you have to use array index to access the properties vs obj.Name. 然后,您的后续元素是具有4个值的数组,因此您必须使用数组索引访问vs.obj.Name属性。
To use obj.Name, you have to return an object instead of an array, eg 要使用obj.Name,必须返回一个对象而不是数组,例如
{
"Year": 1230,
"Electronics": 123,
"BookAndMedia" : 1234,
"HomeAndKitche" : 515
}
the response json would be: 响应json将是:
[{...},{...},{...}]
update: had extra tr tag in original response, shifted ng-if to tr instead 更新:原始响应中有额外的tr标签,将ng-if改为tr
If that's the actual code you're running, it's not going to render the line with your ng-repeat in it because you have it commented out server-side. 如果这是您正在运行的实际代码,则不会渲染其中包含ng-repeat的行,因为您已将其注释到服务器端。
Edit: 编辑:
Change it to this: 更改为此:
public JsonResult GetSalesData()
{
using (Ctxdb dc = new Ctxdb())
{
var v = (from a in dc.SalesRecords
group a by a.SalesDate.Year into g
select new
{
Year = g.Key,
Electronics = g.Sum(a => a.Electronics),
BookAndMedia = g.Sum(a => a.BookAndMedia),
HomeAndKitchen = g.Sum(a => a.HomeAndKitchen)
});
if (v != null)
{
var chartData = new object[v.Count()];
int j = 0;
foreach (var i in v)
{
j++;
chartData[j] = new object { Year = i.Year, Electronics = i.Electronics, BookAndMedia = i.BookAndMedia, HomeAndKitchen = i.HomeAndKitchen };
}
return new JsonResult { Data = new {
Fields = new string[] {"Year", "Electronics", "Books and Media", "Home and KitchenKFC"},
Data = chartData
} , JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
}
return new JsonResult { Data = null, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
and your Angular code to this: 和你的Angular代码:
<tr ng-repeat="datf in DataGraphf.Fields">
<th>{{datf}}</th>
</tr>
<tr ng-repeat="datf in DataGraphf.Data">
<td>{{datf.Year}}</td>
<td>{{datf.Electronics}}</td>
<td>{{datf.BookAndMedia}}</td>
<td>{{datf.HomeAndKitchen}}</td>
</tr>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.